Vuex store

Vuex

一个store有四个属性：state，getters,mutations,actions。

State

state上存放的，说的简单一些就是变量，也就是所谓的状态。就是放一些变量

const store = new Vuex.Store({
    state: {
        count:0
    },
    mutations: {
        // 加1
        increment(state) {
            state.count++;
        },
        // 减1
        decrement(state) {
            state.count--
        }
    }
})

Getters

Getter接受state作为其第一个参数：

conststore=newVuex.Store({

state:{

todos:[

{id:1,text:'...',done:true},

{id:2,text:'...',done:false}

]

},

getters:{

doneTodos:state=>{

returnstate.todos.filter(todo=>todo.done)

}

}

})

computed:{

doneTodosCount(){

returnthis.$store.getters.doneTodosCount

}

}

getters就是可以对数据进行了处理后的一个缓存，State更新它才会重新计算

Vuex允许我们在store中定义“getter”（可以认为是store的计算属性）。

Mutation定义更改State的变量值

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

store.commit('increment')//触发increment进行State的变量值的改变

视图触发Action，Action再触发Mutation。

Mutation：必须同步执行。

Action：可以异步，但不能直接操作State。

Action提交的是mutation，而不是直接变更状态

https://vuex.vuejs.org/zh/guide/getters.html