Vuex获取使用接口数据

store.js

import Vue from "vue";
import Vuex from "vuex";
import { mutations } from "./mutations.js";
import { actions } from "./actions.js";
import { getters } from "./getters.js";
Vue.use(Vuex);

const state = {
  strictCtrlInfo: {},
};
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

mutations.js

export const mutations = {
  mutationsGetUserinfo(state, userinfo) {
    state.strictCtrlInfo = userinfo;
  },
};

actions.js

import Vue from "vue";
let _this = Vue.prototype;
export const actions = {
  actionsGetUserinfo({ commit }) {
    _this.$api.exampleApi.getUserInfo({}).then(res => {
      if(res.code==200) {
      	return commit("mutationsGetUserinfo", res.data) 
      }
    }).catch(err => {}) ;
  }
};

gettet.js

export const getters = {
  getCtrlInfo(state) {
    return state.strictCtrlInfo;
  },
};

App.vue

created() {
   this.$store.dispatch('actionsGetUserinfo');
},

example.vue

export default {
  data() {
  	strictCtrlInfo: {}
  },
  computed: {
    CtrlInfo() {
      return this.$store.getters.getCtrlInfo;
    }
  },
  watch: {
  	// 页面刷新获取 strictCtrlInfo
    CtrlInfo(info) {
      this.strictCtrlInfo = info
    }
  },
  mounted() {
  	// 路由跳转获取 strictCtrlInfo
    let CtrlInfo = this.$store.getters.getCtrlInfo;
    if(CtrlInfo.element) this.strictCtrlInfo = CtrlInfo;
  },
}