Vuex 小白简单使用介绍

1. vuex是个状态管理模式，就是个组件的存储仓库，仓库里面的数据只能由仓库自己管理，组件只负责调用

state var store = new Vuex.Store({ state:{//把state当作data就行 不用return直接写 name:'老罗最帅'//设置初始数据 } })

在你想要使用的页面组件中 : $store.state.name 接收

getters 相当于计算属性

根据现有的数据派生（计算）出来新的数据

getters:{ newnum(state//接收一个新的参数，叫啥都行){ return state.num + 20 } //newnum是新的数字,可以直接调用state的数据 }

页面接收使用:$store.getters.函数名

mutations 修改数据

mutations:{ changename(state){ state.name = 'laoluozuishuai' } //直接修改，是个事件函数页面组件中可以使用 }

页面: $store.commit('仓库中的mutations中设置的事件名称')

传值的话 : $store.commit('changemun',你要传的值)

接值 在 mutations里 changemun(state,data){ //data就是你接的值，起什么名字都行 }

actions 类似mutations，他不直接修改state，但他通过mutations改变数据 。actions可以理解为异步的mutations

actions:{ changenameSync(context){ console.log(context)//这个参数是代表整个仓库，就是new Vuex.Store中的所有属性 setTimeout(function(){ context.commit('changename') },3000) //由他来异步执行的mutations中的方法 } }

页面使用: $store.dispatch('仓库中的actions中设置的事件名称')

Vuex与localStorage

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。