Vuex核心属性（上）

state : 单一状态树（单一数据源），主要是用来存放状态的  如： count:0

Getters :类似于单个组件里面的计算属性

mutations : 状态更新的唯一方式： commit mutations   

主要分为2部分：

　　1.字符串的事件类型

　　increment(state){state.count++}    在这里面 increment   就是字符串的事件类型

  　 2.回到函数（第一个参数就是state）

　　increment(state){state.count++}   在这里面 （state）{state.count++}  就是回调函数

通过mutations更新，

       通过commit  如：

　　　　　　　　increment：function(){

　　　　　　　　　　this.$store.commit('increment')

　　　　　　　　}

关于mutations 提交参数:  可以跟在字符串事件类型后面   参数被称为是mutations的载荷（Payload） 负载的意思

　　　

例子：

　　//1.这是一根普通的提交方式

　　addcount(count){　　
　　　　　　　　　　this.$store.commit('incrementCount' , count)
　　　　　　　　　　}
　　mutations里面的接收方式：
　　　　　　　　　　incrementCount(state,count){
　　　　　　　　　　　　state.count += count
　　　　　　　　　　}

普通方式提交过来的只是   变量

 

//2.特殊的提交方式

//type:存放字符串事件类型　　   　　　　　　

　　addcount(count){
　　　　　　　　　　this.$store.commit({
　　　　　　　　　　　　type:'incrementCount',   　　　　　　　
　　　　　　　　　　　　count:count
　　　　　　　　　　})
　　　　　　　　　}
　　mutations里面的接收方式：
　　　　　　　　incrementCount(state,payload){
　　　　　　　　　　state.count += payload.count
　　　　　　　　}

特殊方式提交过来的参数是个对象   所以应该用对象来接收

Mutatioin的响应规则

    store中的state  只要定义属性之后，这些属性都会加入到响应式系统中，而响应式系统会监听属性的变化，当属性发生变化时，会通知所有界面中用到该属性的地方，让界面发生变化

    响应式的给数组对象添加一条数据，需要用  state.数组对象名字.push(参数：传过来的那条数据)

　或者单纯的给对象添加一个key跟value  ：响应式的添加： Vue.set(state.对象名,key,value)   例子： Vue.set(state.info,'address','广州')

　响应式的删除对象中的某个属性 ：   Vue.delete(state.对象名，属性名）  例子： Vue.delete(state.info, 'age')

Mutation的命名规范问题                 

   在mutation中，官方建议：定义变量名（这样说应该没错）

   在store文件夹中再次创建一个mutations-types.js文件，在该文件中定义变量名  ，举个例子：export const INCREMENT ='increment'

   导出了多条时候，在App.vue文件中接受下： import * as types from "./store/mutations-types"；

　这样在App.vue中，我们就可以直接使用types.INCREMENT来放到this.store.commit（）中去；

   在store下面的index.js中采用以下的方式：

   先导入mutations-types.js  文件：  import * as types from "./store/mutations-types";

　然后在mutations中就可以按照以下的方式使用了。

[types.INCREMENT](state){
    state.count++  
}