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

Question

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下的异步方法呢？

Answer 1

一般来说 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 等等都是同理的。

Answer 2

试试

import store from '@/store'

store.dispatch('xxx')