vue store理解状态管理（vue笔记之store）

如果你写过一些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的一类信息，通俗点说就是不会变的信息，因为其异步，实时的动态数据还是不太适合，特殊场景除外。