如何使用vuex存取数据及调用方法

第一步：安装vuex

第二步：创建store/index.js

import Vue from 'vue'; // 首先引入 vue
import Vuex from 'vuex'; // 引入 vuex
import {getSetCode} from '../assets/api/riskLibrary.js' // 这里是因为封装了 axios 的方法在里面, 所以可以直接引用
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    gkpc: []
  },
  mutations:{
    updateGkpc (state, payload) {
      state.gkpc = payload
    }
  },
  getters:{
    // 这里可以监听state的值 直接返回出去 只读取值 如果需要修改值 找mutations  需要return出去
    gkpc(state) {
               return state.gkpc
       }
   },
  actions:{
    // 获取管控频次枚举
    getGkpc (context) {
        return new Promise((resolve)=>{
        getSetCode('riskIdentificationLibrary_gkpc').then(res=>{
                        context.commit('updateGkpc', res.rows);
                        resolve(res)


                })
        })
       
    }
  }
})

第四步：main.js里引入store

import store from './store/index.js'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

第五步：如何调用及使用

this.$store.dispatch('getGkpc')
                .then(res => {
                  console.log('里面两种res及this.$store.getters.gkpc都可获得请求到的数据',res,this.$store.getters.gkpc);
                })