5分钟学会Vuex

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化

这是vuex的官网，对vuex的解释，乍一看挺难理解的，什么叫 状态管理模式？，什么又是集中式存储管理？，官网的描述不明觉厉。首先我们就先来解释这个定义。
所有的开源库都是为了解决我们在实际开发的过程之中遇到的问题而出现的。而vuex就是为了解决我们在使用vue的过程中对多个视图依赖于同一个状态（或者说：我们很难在vue中通过一种优雅的方式创建全局变量，并改变全局变量的状态）。现在理解了吗？

1、vuex就是在vue中创建全局变量的东西
2、vuex提供了一些优雅的方法，可以让我们改变全局变量的值

OK, 这就是vuex所解决的问题。

怎么去用Vuex？

使用vuex的方式非常非常简单，我们只需要记住几个核心的概念就可以。

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中所有的概念了，是不是很简单？下面就让我们通过实例，看看他这些概念具体都是怎么使用的。

上手Vuex

我们使用很真实，但是很简单的项目引导大家去使用vuex。首先我们需要先使用vue-cli去初始化一个项目（不了解vue-cli的朋友可以去百度一下）。
项目创建完成之后，在src下创建store文件夹。结构如下
这里写图片描述

这个store文件夹，就是我们放置vuex文件的地方。

在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({

})

然后在vue的初始文件中注册vuex的实例

import store from './store'

new Vue({
    ...
      store
})

这样 vuex 就已经注册完成了。

下面我们在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);
        }
    }
})

我们在代码中分别注册了，state、getters、mutations、actions。

这样我们就可以在任何一个 component中通过 this.$store.dispatch('addNumCount', 5); 或者 this.$store.dispatch('addCount'); 去触发actions操作来改变state中的值。

很容易对不对？这些就是vuex中最基础的概念，了解了这些，就可以入门vuex了。但是vuex中还有一个我们前面列出来的核心概念，我们并没有说，他就是modules。顾名思义，模块。也就是说当我们的项目足够大的时候，我们不希望吧所有的全局变量和操作全局变量的方法都放到一个文件中的时候，我们可以使用 modules去分割模块。

其他的一些概念，我们不在这篇博客中去讲解了，因为vuex的官网中的描述非常清楚，我还是建议大家如果想更深的了解vuex（包括模块化，vuex中推荐的项目结构，mapState，actions promise 等概念），可以去访问 Vuex的官网，一定会获益良多的。

Vuex是什么？

怎么去用Vuex？

上手Vuex

猜你喜欢