文件名称 | 版本号 | 作者 | 组件版本 | |
---|---|---|---|---|
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
},
},