在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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐