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

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

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

回答：

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

回答：

试试

import store from '@/store'
store.dispatch('xxx')

以上是 vue 在main.js中如何获取store.js中action里定义的异步方法？ 的全部内容， 来源链接： utcz.com/p/933330.html

回到顶部