Vuex 总结

1. vuex简介

vuex是专门用来管理vue.js应用程序中状态的一个vue插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性

2. vuex的组成结构示意图

vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。如下图：

vuex里有这么一个规则：

只能在mutaions里修改state，actions不能直接修改state

mutations即变化，修改state的数据，而且只能是同步的，不能存在异步的操作。如果需要异步怎么办呢？把异步操作放在actions里，拿到数据再通过mutations同步处理

3. vuex 的核心概念

3.1 store

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。

3.1.1 创建store

const store = new Vuex.Store({...});

可见，store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：

1.state – 存放状态

2.getters – state的计算属性

3.mutations – 更改状态的逻辑，同步操作

4.actions – 提交mutation，异步操作

5.mudules – 将store模块化

关于store，需要先记住两点：

1. store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；

2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

3.1.2 一个完整的store的结构是这样的

const store = new Vuex.Store({

  state: {

    // 存放状态

  },

  getters: {

    // state的计算属性

  },

  mutations: {

    // 更改state中状态的逻辑，同步操作

  },

  actions: {

    // 提交mutation，异步操作

  },

  // 如果将store分成一个个的模块的话，则需要用到modules。

  //然后在每一个module中写state, getters, mutations, actions等。

  modules: {

    a: moduleA,

    b: moduleB,

    // ...

  }

});

3.2 state

state上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。另外有些状态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在store中去。

3.2.1 如何在组件中获取vuex状态

由于vuex的状态是响应式的，所以从store中读取状态的的方法是在组件的计算属性中返回某个状态。

import store from 'store';

const Counter = {

  template: `<div>{{ count }}</div>`,

  computed: {

    count () {

      // 获取store中的状态

      return store.state.count;

    }

  }

}

这样，组件中的状态就与store中的状态关联起来了。每当store.state.count发生变化时，都会重新求取计算属性，从而更新DOM。

然而，每个组件中都需要反复倒入store。可以将store注入到vue实例对象中去，这样每一个子组件中都可以直接获取store中的状态，而不需要反复的倒入store了。

const app = new Vue({

  el: '#app',

  // 把 store 对象注入到了

  store,

  components: { Counter },

  template: `

        <div>

            <counter></counter>

        </div>

    `

});

这样可以在子组件中使用this.$store.state.count访问到state里面的count这个状态

const Counter = {

  template: `<div>{{ count }}</div>`,

  computed: {

    count () {

      // 获取store中的状态

      return this.$store.state.count;

    }

  }

}

3.2.2 mapState

当一个组件获取多种状态的时候，则在计算属性中要写多个函数。为了方便，可以使用mapState辅助函数来帮我们生成计算属性。

import { mapState } from  'vuex';

export default {

  // ...

  data (){

    localState: 1

  }

  computed: mapState({

    // 此处的state即为store里面的state

    count: state => state.count,

    // 当计算属性的名称与state的状态名称一样时，可以省写

    // 映射 this.count1 为 store.state.count1

    count1,

    //'count'等同于 ‘state => state.count’

    countAlias: 'count',

    countPlus (state){

    // 使用普通函数是为了保证this指向组件对象

      return state.count + this.localState;

    }

  })

}

//上面是通过mapState的对象来赋值的，还可以通过mapState的数组来赋值

computed: mapState(['count']);

//这种方式很简洁，但是组件中的state的名称就跟store中映射过来的同名

对象扩展运算符

mapState 函数返回的是一个对象，为了将它里面的计算属性与组件本身的局部计算属性组合起来，需要用到对象扩展运算符。

computed: {

  localState () {

  ... mapState ({

     

    })

  }

这样，mapState中的计算属性就与localState计算属性混合一起了。

3.3 getters

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。此时可以用到getters，getters可以看作是store的计算属性，其参数为state。

const store = new Vuex.Store({

  state: {

    todos: [

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

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

    ]

  },

  getters: {

    doneTodos: state => {

      return state.todos.filter(todo => todo.done);

    }

  }

});

3.3.1 获取getters里面的状态，方法一

store.getters.doneTodos //  [{ id: 1, text: 'reading', done: true }]

//在组件中，则要写在计算属性中，

computed: {

  doneTodos () {

    return this.$store.getters.doneTodos;

  }

}

3.3.2 使用mapGetters获取getters里面的状态：方法二

import {mapState, mapGetters} from 'vuex';

computed: {

...mapState(['increment']),

...mapGetters(['doneTodos'])

}

3.4 mutations

mutations里面是如何更改state中状态的逻辑。更改Vuex中的state的唯一方法是，提交mutation，即store.commit(‘increment’)。

3.4.1 提交载荷(payload)

可以向commit传入额外的参数，即mutation的载荷。

mutations: {

  increment(state, n){

    state.count += n;

  }

}

store.commit('increment', 10);

payload还可以是一个对象。

mutations: {

  increment(state, payload)

  state.count += payload.amount;

}

}

store.commit('increment', {amount: 10});

还可以使用type属性来提交mutation。

store.commit({

  type: 'increment',

  amount: 10

});

// mutations保持不变

mutations: {

  increment(state, payload){

    state.count += payload.amount;

  }

}

注意：mutation必须是同步函数，不能是异步的，这是为了调试的方便。

3.4.2 在组件中提交mutations

那么mutation应该在哪里提交呢？ 因为js是基于事件驱动的，所以改变状态的逻辑肯定是由事件来驱动的，所以store.commit(‘increment’)是在组件的methods中来执行的。

方法1: 在组件的methods中提交

methods: {

  increment(){

    this.$store.commit('increment');

  }

}

方法2: 使用mapMutaions

用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

import { mapMutaions } from 'vuex';

export default {

  // ...

  methods: {

    ...mapMutaions([

    'increment' // 映射 thi