Vuex核心概念

State
Getters
Mutations
Actions
Module

Vuex提供了一个store单实例来管理state。在初始化store实例时，其中的选项涉及到Vuex的5个核心概念，如下

State
Getters
Mutations
Actions
Module

State

state就是Vue应用中需要使用的所有公共数据，在Vue通常放在应用的顶层组件上，通过父子组件通信的方式进行传递和修改。

单一状态树

Vuex使用单一状态树(single state tree)。什么意思？

在Vuex中，通过store单例来管理state，也就是说，只用一个store，一个state，这就是单一的理解。

在实际应用的运行过程中，state也即应用的数据会随着与用户的交互进行变化。类似于在时间轴上，每一个时刻的state类似于一个快照，state的数据可能不同，这是对状态树的理解。

Getters

什么是Getter？

从功能上看，Getter就是根据需要，从原来组件的公共状态中派生出新的公共状态，比如过滤其中一部分。

从程序上看，Getter是一个函数，通过将组件的初始公共状态state作为第一个参数（允许：store实例的setters属性可以作为第二个参数），经过处理后，返回新的公共状态newstate。

Getter类似于数据库的查询操作，不对原始数据进行更改。

如何定义Getter？

Vuex允许我们在实例化store时，在参数中对应的getters属性中定义所有的getter。

getters属性的值为一个对象，对象中每个属性对应一个getter，每个getter的值为一个函数，函数返回值可以为新的状态或一个函数。

语法：

  getters:[key:string]:Function

示例：

const store = new Vuex.Store({
  state: {
    //定义一个todo列表（id，需要完成的任务，是否完成）
    todos: [
      { id: 1, text: '学习vue', done: true },
      { id: 2, text: '学习vuex', done: true },
      { id: 3, text: '学习vue-router', done: false }
    ]
  },
  getters: {
    //state作为第一个参数：获取已经完成的事情
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    //getter 作为第二个参数：获取已经完成的事情的数量
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    },
    //返回一个函数：通过id获取对应id的事情。
    getTodoById: (state) => (id) => {
         return state.todos.find(todo => todo.id === id)
    }
  }
})

如何访问Getter？

实例化store时所有定义的getter都将暴露给store实例的getters属性，即store.getters。

由此可知，对应返回值不是函数，直接访问相应属性即可；对应返回值为函数，访问相应属性加括号调用即可。

//属性调用
store.getters.doneTodosCount // -> 1
//方法调用
store.getters.getTodoById(2) // -> { id: 2, text: '学习vuex', done: false }

Mutations

mutation(英文：改变)，设计为作为同步改变state的唯一方法。

所谓改变state，即对原始数据进行修改，类似于对数据库中的表进行修改操作。

每一个mutation有一个类型（type）和处理函数(handler)。在处理函数中，state作为第一个参数传入。

每一个mutation处理函数无法直接调用，需要通过store实例的commit方法调用。

在通过commit方法调用mutation处理函数时，可以通过payload传入额外的数据。

定义Mutations

语法

  //Mutations为一个对象，里面为一个个的mutation，每个mutation为type:Function的键值对
  Mutations:{[type:string]:Function}

示例

var store = new Vuex.Store({
    state: {
        todos: [],
        filter: "all"
    },
    mutations: {
        //添加任务
        addTodo: function (state, todo) {
            state.todos.unshift(todo);
        },
        //根据id删除完成的任务
        deleteTodo:function(state,id){
            state.todos.splice(state.todos.findIndex(todo=>todo.id==id),1)
        },
        //删除所有完成的任务
        clearAllCompleted:function(state){
           state.todos=state.todos.filter(todo=>!todo.completed)
        }
    }

});

Actions

Action与mutation基本相同，区别在以下两个方面：

Action是通过提交mutation来改变state，而不是直接改变state
Action可以执行异步操作，而mutation只能为同步操作

Moudle

由于只使用一个store对象来管理state，如果是一个庞大的应用，那么store会是一个比较大的对象，显得臃肿，不利于维护。

Vuex提供了Module(模块)，可以将store拆分为不同的模块。

参考

说明

该文章同步到github:pensiveant-blog