如果你写过一些vue的项目并且没有用过store,你可能会深深的理解过组件之间传递参数的痛。
其实在vue中我们可以使用store来统一管理我们需要的值,值一旦被修改,所有引用的地方都可以产生变化
当我们使用webpackage初始化项目的时候,会发现项目根目录下已有一个store目录
当你看到这个目录的时候一定会想这些参数是什么用的,
state:用来保存一些变量
state: {
count:1
},
然后我们在页面上可以使用以下读取该变量,当值有所变化的时候所有使用此变量的地方都会产生变化。
<h1>{{this.$store.state.count}}</h1>
getters:相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,并且返回计算后的结果。
getters: {
getStateCount(state){
return state.count+1
}
},
以上的+1是给state的值进行加1并且返回回来,注意并不是给state赋值,而是监听state的值。
同样在页面可以这样进行访问
<h1>{{this.$store.getters.getStateCount}}</h1>
Mutations:唯一的可以修改state变量中的方法,可以直接进行修改state的变量的值。
add(state,n){
state.count=state.count+n
},
reduction(state){
state.count=state.count-1
}
将当前的state对象传入,并且我这里传入一个变量n用来加法赋值
methods: {
addfunc(){
this.$store.commit("add",10)
}
}
这里要记住使用commit方法来调用,第一个参数为方法名字
Actions:虽然以上方法可以直接调用Mutations中的方法去修改state中的变量,但是并不建议这样去做,官方的推荐是使用分发action的方法去调用
actions: {
addFunc(context,n){
context.commit("add",n)
},
reducerFunc(context){
context.commit("reduction")
}
}
然后在代码中使用这样的代码去分发
this.$store.dispatch("addFunc",10)
vue的状态管理还是很简单易用的,可以简化大量的操作。
目前感觉store比较适合存储登录信息,token的一类信息,通俗点说就是不会变的信息,因为其异步,实时的动态数据还是不太适合,特殊场景除外。