vue多组件之间共享（vuex）

        在传统的通信方式中有这样一个问题我们实现起来很麻烦，就比如，在Vue框架中，有A和B两个组件，A中数据B需要用就可以给B绑定全局事件总线$bus.$on("xxx事件"，回调函数)，然后A组件触发$bus.$emit("xxx事件",传给数据)，就是如下图的展示:

这样B就可以得到A的数据，但是有这样一个问题，如果还有组件C，组件D，组件E……等等很多都需要这个数据该怎么办呢，难不成给每一个组件都去绑定全局事件总线吗，那样就会很麻烦，而且容易代码编写冗余，这个时候就可以利用Vuex插件来帮我们解决这个问题，先看一下下面这个图：

 利用Vuex来当全局共享组件来服务各个组件都需要的数据，而且都是双方连接，可以支持读写操作。我们接下来先配置一下Vuex

        第一步是先得下载Vuex，他本身是一个插件

大家根据自己的vue版本安装对应的vuex 

下面是vue2支持的版本：

npm i vuex@3

vue3支持的版本：

npm i vue@4 

        随后就是搭建Vuex环境，代码如下：

在脚手架的components文件下先创建一个文件夹(名字随意即可，我用的vuex当的文件夹名字)，完成之后在你创建文件之下在创建一个js文件（名字也是随意起即可,我这里用的是vuex.js）然后就是配置vuex.js里的属性操作:

// 该文件来创建Vuex中的核心store

// 引入Vuex,我们这里是vue2,所以要引入Vuex3版本的包,vue3的话就引入Vuex4的包

import Vuex from 'vuex';
import Vue from 'vue'
Vue.use(Vuex)
//准备actions来用于组件的动作(服务)

let actions = {
    plus:function(minstore,value){
        minstore.commit('plus', value);
    }
};

//然后就是mutations 来操作数据

let mutations = {
    plus(minstore,value){
        minstore.n+=value;
    }
};

//最后是state 来存储数据

let state = {
    n : 1//配置数据
};

// 创建store来管理这三个对象,并暴露出去

export default new Vuex.Store({
    actions:actions,
    mutations:mutations,
    state:state
});

 

这里就得来说一下actions，mutations，state这些有什么作用，先看一张图：

 这是vuex的运行图，

        最后看一下实现效果是什么样子的：

 

我们的目的就是通过vuex来实现两个不同组件的按钮都可以获得对数据1的修改和获取：