Vue3中,公共js中调用Vuex的变量或者方法
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
在Vue3中,想要在一个公共的js文件中调用Vuex的方法。结果出现了如图的保存信息;
[Vue warn]: inject() can only be used inside setup() or functional components
这里是我的原来的代码片段(此代码不可用):
// 下面声明store的方法是不可用的
import { useStore } from "vuex";
const store = useStore();
import { computed } from "vue";
// 获取Vuex中的变量
var stepList = computed(() => {
return store.state.stepList;
});
function putValue2VuexStepZArr(tabListSelected) {
// 业务代码
}
export default putValue2VuexStepZArr;
在上面中使用store的方式就是按照在Vue3中的方式引入的。这样是不可以的。经过查询得知,是需要直接引入vuex中的实例才是可以的;
所以正确的代码如下:
// 下面声明store的方法是不可用的
// import { useStore } from "vuex";
// const store = useStore();
import { computed } from "vue";
import store from "../store/index"; // 这种方式才是导入了实例;
// 获取vuex中的变量
var stepList = computed(() => {
return store.state.stepList;
});
// 获取vuex中的方法
const SET_STEPZARR = (param) => {
store.commit("SET_STEPZARR", param);
};
function putValue2VuexStepZArr(tabListSelected) {
// 业务代码
}
export default putValue2VuexStepZArr;
其实就是把store中的实例真正的导入进入到这个js中,他就可以获取vuex的方法了。
"../store/index"文件其实就是Vuex的声明实例;应该是以下的格式:
import { createStore } from 'vuex'
import state from "./state";
import getters from "./getters";
import mutations from "./mutations";
const store = createStore({
state,
getters,
mutations,
actions:{}
})
export default store
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)