vuex 实现vue不同组件之间的状态共享

一、什么是vuex？

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

二、为什么要使用vuex？

一般情况我们可以通过props、$emit在父子组件之间来回穿梭传值？抑或通过bus在组件之间共享值？无论哪种方式，都是极其麻烦或者可读性非常差的。而Vuex的引入很好的解决了这个问题，它把一些共享的属性（状态）集中的管理起来，使得你只需要关注Vuex中定义的state就可以了，state的变化会自动响应到引用了它的视图（页面组件）

Vuex很好的解决了以下两个问题：

1、多个视图依赖于同一状态。
2、来自不同视图的行为需要变更同一状态。

三、简单示例

1、安装包

NPM

npm install vuex --save

Yarn

yarn add vuex

2、建议把vuex单独放在一个模块

src目录下新建 vuex 文件夹 新建 store.js

import {createStore} from 'vuex';
const store=createStore({
    state(){
        return{
            count:1
        }
    },
    mutations:{
        increment(state){
            state.count++
        }
    }
})
export default store     

3、其它组件中使用

this.$store.state.count
this.$store.commit("increment")