vuex使用

用它来简化组件传值
引入
创建vuex实例

//像创建路由一样，创建vuex实例
    var store = new Vuex.Store({
      state:{
        count:0
      },
      mutations:{}
    })

挂载到vue实例上

let vm = new Vue({
       el:"#app",
       store
     })

查看vuex实例的信息：$store
state相当于data，里面存储的信息可供多个组件使用，并且更改显示到所有引用到的组件中，实现组件之间某些值的传递，像购物车功能
mutations相当于methods存放方法
在组件中使用vuex中state中定义的值可以用 $store.state.xx ，
想要对引用到的值更改，不可以再组件的methods中定义方法改变vuex中state中的值，不符合vuex的理念，像子组件向父组件传值vue不推荐子组件改变父组件中的变量，会报错，想要更改，可以使用注册事件一样，
想要改state中的值，要通过vuex的mutations中定义的方法，来改变值，这样只有一种渠道对值进行直接更改出现问题方便找出问题，如果多出都可以对state的值进行更改，不利于找到出现问题的所在

在组件中定义方法，调用vuex中定义的方法

methods:{
        add(){
          console.log(this.$store);
          this.$store.commit('increment')
        },
        remove(){
          this.$store.commit("subtract")
        }
      }

在vuex的mutations中定义对应的方法

mutations:{
        increment(state){
          state.count++
        },
        subtract(state){
          state.count--; 
        }
      },

这里要注意，mutations中的方法的参数统一要写state，state就是存放要用到值的存储，在里面对值进行更改不需要像methods中使用this，这里使用state.xx进行操作
在组件中调用mutations要用 this.$store.commit(‘increment’)
commit（“方法名”）来调用，
给mutations中的方法传参，vuex规定只能传一个参数，这个参数可以是一个值，一个对象或是数组，在mutations的方法中，第一个参数始终是state，第二个可以是接收的一个对象，或者什么，

add(){
          console.log(this.$store);
          this.$store.commit('increment',2)
        },
        remove(){
          this.$store.commit("subtract",3)
        }

increment(state,a){
          state.count +=a
        },
        subtract(state,a){
          state.count -= a; 
        }

多个参数

 add(){
          console.log(this.$store);
          this.$store.commit('increment',{a:1,b:2})
        },
        remove(){
          this.$store.commit("subtract",{a:2,b:2})
        }

increment(state,obj){
          state.count += (obj.a+obj.b)
        },
        subtract(state,obj){
          state.count -= (obj.a+obj.b) 
        }

vuex中的计算属性

var store = new Vuex.Store({
      state:{
        count:0
      },
      mutations:{
        increment(state,obj){
          state.count += (obj.a+obj.b)
        },
        subtract(state,obj){
          state.count -= (obj.a+obj.b) 
        }
      },
      getters:{
        componted(state){
			return 'count的值是:'+state.count;
		}
      }
    })

gatters类似计算属性中的get属性，里面引用的值发生改变，对应的视图就会产生变化，还类似过滤器，不会修改数据，只会返回根据数据做的一些操作的结果；

总结
1，state中的数据不能直接写该，要通过mutations
2，组件要从state中获取数据：
this.￥store.state.xxx
3，组件修改数据用mutations中的方法，组件通过this.$store.commit(“方法名”，唯一的参数)
4，如果store中state上的函数，在对外提供时需要一层包装，那么，推荐使用getters，对应组件使用this.￥store.getters.xxx