vuex_v1.0.0

文件名称	版本号	作者	qq	组件版本
vuex	v1.0.0	学生宫布	8416837	vue2.6

• 分几步，打入代码，理解意思即可：

代码

定义js setter

import { getInviteDetailList } from '@/api/platform/project' // 接口

const inviteDetailList = { // 对象，会导出
  state: { // 对象分级属性
    notApprovalCount: 0,
    piS: [],
  },

  mutations: {
    SET_NOT_APPROVAL_COUNT: (state, data) => { // setter
      state.notApprovalCount = data.notApprovalCount
      state.piS = data.piS
    },
  },

  actions: {
    // 登录
    GetInviteDetailList({ commit }) {
      return new Promise((resolve, reject) => {
        getInviteDetailList().then(res => {
          if (res.code=== 200) { // 注意这里有缓存
            // 更新参数
            // 将未审批数目存入vuex全局变量
            commit('SET_NOT_APPROVAL_COUNT', res.data) // 存储到全局
          }
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
  }
}

export default inviteDetailList

将定义的js引入到store的首页js文件，注册进去，要不然不起效

import Vuex from 'vuex'
import getters from './getters'
import inviteDetailList from "./modules/inviteDetailList"
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    inviteDetailList,
    // ... ...
  },
  getters
})

export default store

getter

• 写到getter.js 简化调用名称

notApprovalCount: state => state.inviteDetailList.notApprovalCount,
  piS: state => state.inviteDetailList.piS,

调度任务 触发调度

写到vue文件👇，触发调度的方式是自定义的，比如当某个变量改变时

this.$store.dispatch(`GetInviteDetailList`).then(() => { // 执行，获取最新数据
this.invites = this.$store.state.inviteDetailList.piS // 从存储获取调度后的值

从存储获取值

写到vue文件👇

computed: {
      getNotApprovalCount: {
        get() {
          return this.$store.state.inviteDetailList.notApprovalCount
        },
      },