Vue 状态管理与Vuex

Vuex 是什么？

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

上面的是官方的说法，有兴趣的可以详细了解下：Vuex

状态管理与使用场景

我们知道Vue中的父子组件或者说跨级和兄弟组件在通信的时候，可以使用bus（中央事件总线）的方法，用来触发和接收事件，进一步起到通信的作用。Vuex解决的问题和 bus类似，它作为Vue的一个组件使用，可以更好的管理和维护整个项目的组件状态。

常规例子

一个组件可以分为数据（model）和视图（view），数据更新的时候，视图也会自动更新。在视图中又可以绑定一些事件，它们触发menthods里指定的方法，从而可以改变数据，更新视图。这是组件基本的运行模式，比如：

<template>
    <div>
        {{message}}
        <button @click="handleClick">修改</button>
    </div>
</template>
<script>
    export  default {
        data() {
            return {
                message:"hello world"
            };
        },
        methods: {
            handleClick() {
                this.message = "hello Vue"
            }
        }
    };
</script>

这里的数据message和方法handleClick只有在test.vue组件里可以访问使用，其他的组件无法读取、修改message的状态，但是实际业务中，经常会有跨组件共享数据的需求，所以才设计了Vuex用来统一管理组件状态，使组件的使用更加高效。

Vuex的使用

• 通过npm安装

npm install --save vuex

• 在 ``main.js```中，通过Vue.use() 使用Vuex

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
import Vuex from ‘vuex’
Vue.use(VueRouter);
Vue.use(Vuex)
//路由配置省略
//其他
...
...
const store = new Vuex.Store({
	//vuex配置
});
new Vue({
    el: '#app',
    router: router,
    //使用vuex
    store:store
    render: h => {
        return h(App)
    }
});

因为从仓库store包含了应用的数据（状态）和操作过程。Vuex里的数据都是响应式的，任何组件用同一store的数据的时候，只要store的数据变化，对应的组件数据也会变化，从而达到目的。比如：
实现一个计数器，数据保存在Vuex的num字段内，定义一个数据count，初始值为0：

const store = ({
	num:{
		count:0
	}
});

那么在任何组件内，可以直接通过：

$store.num.count

读取

总结

使用Vuex会有一定的复杂性，他的主要使用场景是大型单页应用或者说是多人协同开发的场景。如果你的项目不是很复杂，或者说希望速度完成，也可以不适用Vuex，选择使用bus方法来实现。这个取决于每个人或者每个团队。