vuex详解

官方解释

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vue的核心部分（应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)）：

1、this.$store ： 我们可以通过 this.$store 在vue的组件中获取 
vuex的实例。

2、State ： vuex中的数据源，我们可以通过 this.$store.state 获取
我们在vuex中声明的全局变量的值。

3、Getter： 相当于vue中的computed ， 及 计算属性， 可以用于监听、
计算 state中的值的变化

4、Mutation： vuex中去操作数据的方法 （只能同步执行）

5、Action： 用来操作 Mutation 的动作 ， 他不能直接去操作数据源，
但可以把mutation变为异步的

6、Module： 模块化，当你的应用足够大的时候，你可以把你的vuex分成多个
子模块

什么情况下我应该使用 Vuex？

1. 不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的 store 模式。

2. 适用于：中大型单页应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题如下：

① 多个视图使用于同一状态：

传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力

② 不同视图需要变更同一状态：

采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码

vuex步骤：

1.项目创建完成之后，在src下创建store文件夹。在store文件夹下创建 index.js 作为我们生成vuex的文件

// index.js
import Vue from 'vue'; 
import Vuex from 'vuex';

// 需要注册vuex到vue中
Vue.use(Vuex);

// 使用 es6 语法把vuex的实例对象输出
export default new Vuex.Store({

})

2.在vue的初始文件中注册vuex的实例

import store from './store'

new Vue({
    ...
      store
})

3.在vuex中去注册我们前面说过的vuex的核心概念

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    // 在state中去声明全局变量，可以通过 this.$store.state 访问
    state: {
        count: 0
    },
    // 在getters中声明state中变量的计算函数，缓存计算后的数据， 通过 this.$store.getters 调用
    getters: {
        // 接受state作为参数，每次 count发生变化时 ， 都会被调用
        consoleCount: state => {
            console.log('the state count : ' + state.count);
        }
    },
    // 只能执行同步方法，不要去执行异步方法 通过 this.$store.commit 方法去调用
    mutations: {
        // 改变state状态的方法，不建议直接通过  
        // this.$store.state.? = ？的方式改变state中的状态
        addCount: state => {
            ++state.count;
        },
        // mutations的第一个参数即为 state对象，并且可以向mutation传入额外的参数
        addNumCount: (state, n) => {
            state.count+=n;
        },
    },
    // 借助actions的手去 执行 mutations ， 通过  this.$store.dispatch 的方式调用
    // 可以用来执行异步操作，可以跟踪异步数据状态变化
    actions: {
        addCount: context => {
            // 调用 mutation
            context.commit('addCount');
        },
        addNumCount: (context, n) => {
            context.commit('addNumCount', n);
        }
    }
})

这时候我们就可以在任何一个 component中通过 this.$store.dispatch('addNumCount', 5); 或者 this.$store.dispatch('addCount'); 去触发actions操作来改变state中的值。更详细的vuex可以去看官网，vuex的官网