vue3中vuex报错，dispatch未定义，unknown action type找不到方法？?

  • Z时代
  • 2024-02-07
  • 分类：IT

一共两个问题
问题一：
由于vue3中name跳转路由 params 参数无法传递，query参数会拼接在地址上，不美观，于是将参数通过 vuex 传递。

const goDetail = (e) => {
  store.dispatch('setPathParams', { picUrl: e.picUrl })
  router.push({
    name: 'personalizedDetail',
    // query: { picUrl: e.picUrl }
  });
}

在vue2中使用方式就是这样的，但是在3中就报错

// 此处修改 state 中数据，同步执行
const mutations = {
    CHANGEPATHPARAMS(state, payload) {
        state.pathParams = payload;
    },
    DELPATHPARAMS(state) {
        state.pathParams = {}
    },
};
// 异步处理，获得数据之后，不能在此处赋值，需要在 mutations 中修改
const actions = {
    clearUser({ commit }) {
        commit(CLEAR_USER);
    },
    async setPathParams({ commit }, payload) {
        console.log(456); // 有执行
        // 此处为什么会报 dispatch 未定义，
        await dispatch('clearPathParams')
        commit('CHANGEPATHPARAMS', payload);
    },
    async clearPathParams({ commit }) {
        console.log(123); // 未执行
        await commit('DELPATHPARAMS');
    },
};

报错截图
vue3中vuex报错，dispatch未定义，unknown action type找不到方法？?

问题二:
在vuex中使用 modules 报错，无法正确找到方法

// 先引入，路径正确的
import moduleUsers from '/Users/index'
export default createStore({
    modules:{
        moduleUsers
    },
    plugins: [myPersistedState]
});
// moduleUsers 文件
const moduleUsers = {
  // namespaced: true,
  state:{
    // 解决params传参，F5 刷新后参数丢失问题
    pathParams: {}
  },
  // 中间其余模块不影响已删除
  action:{
    setPathParams123({ commit },payload){
      console.log(payload,'--------');
      commit(CHANGEPATHPARAMS,payload);
    }
  }
}
export default moduleUsers
// 使用vuex方法
const store = useStore();
    const goDetail = (e) => {
      // 此处一直报错 [vuex] unknown action type: moduleUsers/setPathParams123
      // 无论 namespaced 是否为true都在报错，
      store.dispatch('moduleUsers/setPathParams123', { picUrl: e.picUrl })
      router.push({
        name: 'personalizedDetail',
        // query: { picUrl: e.picUrl }
      });
    }

因为在是自己研究vue3使用，所以函数命名就随意一些，
因为有了问题二的报错，无法解决，才给使用问题一的方式
然后问题一也报错了，依然无法解决，发帖询问各位大佬
thanks

回答：

你直接在 actions 的方法里 dispatch 当然不行，相当于在当前的环境，直至全局查找 dispatch 方法，它是不存在的。应该是如下这样，相当于使用第一个参数的 dispatch 属性：

{
  actions: {
    async foo({ dispatch }, payload) {
      dispatch('bar');
    }
  }
}

以上是 vue3中vuex报错，dispatch未定义，unknown action type找不到方法？? 的全部内容， 来源链接： utcz.com/p/933376.html

回到顶部