五步搞定Web前端开发环境部署，Vue2 vex贯穿全局,通篇掌握，714页PDF的鸿蒙学习笔记,

mutations: { //相当于methods 只有mutations才可以修改该state 转变的意思 commit//委托的意思 第一参数state

changeData(state, val) {

// state.list = val

//不直接将参数赋值,如果本地存储有或空,就将本地的赋值给list,否则直接将参数赋值给list

if (JSON.parse(localStorage.getItem(‘list’)) || []) {

state.list = JSON.parse(localStorage.getItem(‘list’)) || []

} else {

state.list = val

}

//以上代码目的打开页面如果本地有数据,就使用本地的,不会一打开就重新将data.JSON的值赋值给list

console.log(state.list);

},

},

actions: { //动作的意思 执行异步操作的 dispatch//派遣的意思 actions第一个参数永远是context

methodName(context) {

axios.get(‘/data.json’).then(res => {

// console.log(res.data.data);

context.commit(‘changeData’, res.data.data)

//页面触发action,action触发mutation,从而修改state中的数据,因为mutation不能写异步代码

})

}

},

modules: { //加载模块的意思 当数据state较多的时候可以分模块管理

},

getters: { //相当于计算属性 获取的人的意思

//在页面使用 { {$store.getters.obj.num0}}

// obj(state) {

// let num0 = state.list.filter(v => v.status == 0).length

// let num1 = state.list.filter(v => v.status == 1).length

// let num2 = state.list.filter(v => v.status == 2).length

// return { num0, num1, num2 }

// }

},

plugins: [ //第三步配置全局

new vuexPersist({

storage: window.localStorage,

}).plugin,

],

});

建议在computed:{ }中使用,如果在data中使用,修改了vuex的数据data不会改变重新渲染,使用computed当依赖值发生改变就会重新渲染

在页面取vuex的数据如下(不使用辅助函数)

---

/**

• views/home.vue

*/

{ { changeText }}

//666 ! 成功修改了stat