vue 在main.js中如何获取store.js中action里定义的异步方法？

作者站长头像
站长
· 阅读数 9

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import { getBtnCode } from '../service';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: {},
    menus: [],
    btnPermission: [],
  },
  mutations: {
    updateBtnPerm(state, data) {
      state.btnPermission = data;
    },
  },
  actions: {
    async getBtnPermission({ commit }) {
      const res = await getBtnCode();
      const arr = res.split(',');
      commit('updateBtnPerm', arr);
      return Promise.resolve(arr);
    },
  },
  getters: {
    btnPermission(state) {
      return state.btnPermission;
    },
  },
});

export default store;

main.js

import Vue from 'vue';
import i18n from '@/locale';
import '@/styles/variables.less';
import '@/plugins/find';
import App from './App.vue';
import router from './router';
import store from './store';

new Vue({
  store,
  router,
  i18n,
  render: (h) => h(App),
}).$mount('#app');

我知道在页面上可以通过this.$store.dispatch('getBtnPermission')获取，但是main.js中怎么获取Action下的异步方法呢？

回复
1个回答
avatar
test
2024-07-14

一般来说 main.js 都会引入 vuex 实例化后的 store 对象。所以直接使用 store.dispatch('ActionName') 就可以了。

我就复制官网的例子来举例了：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
// main.js
import store form './store.js'

store.commit('increment')

new Vue({
  el: '#app',
  store: store,
})

使用 state、action 等等都是同理的。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容