组件通信：vuex

序言：今天我们简单说一下vuex的使用，vuex是什么呢，相当于react的redux，如果项目使用数据过多的话，直接管理是非常不方便的，那么采用vuex，那些繁琐的问题就迎刃而解了，首先我们先看看官方对vuex的说明：

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

说白了就是vue的状态管理，你只需要每次动态的改变这些状态就行，数据就会自动渲染

一、创建vue项目

1、安装vue项目

vue init webpack projectName

2、进入项目目录

cd projectName

3、安装vuex

npm i vuex --save

4、项目启动

npm run dev/npm start

ps:如果npm安装慢的话，建议使用淘宝镜像:cnpm 安装淘宝镜像：

npm i -g cnpm --registry=https://registry.npm.taobao.org

二、vuex的引入

项目安装成功之后，初始的文件目录格式都是一样的（基于vue2.X创建，vue3.X会与此有区别），像我这样：

然后我们简单的使用，在 main.js 中引入 vuex

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)

记得一定要挂载使用它，就是这一句：Vue.use(Vuex)

三、在 main.js 中加入

const store = new Vuex.Store({ // store对象 state : { count : 0 } })

四、把刚才的 store 对象实例化到 Vue 中

new Vue({ el: '#app', store,//加入store对象 router, components: { App }, template: '<App/>' })

完成这一步我们就可以使用了，一个简单的vuex的state就可以了，怎么用呢?

<div id="hello"> <p>{{$store.state.count}}</p> </div>

五、很明显，刚才只是简单的一例子，如果你需要做大型的项目，不可能把store对象写在 main.js 里，这样是非常不方便管理的，所以我们需要在 src 下新建一个 文件夹 store 专门存放 store 对象，然后我们新建一个文件 index.js

//index.js import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); export default new vuex.Store({ state:{ count:0 } })

相应的main,js就需要做修改了

import store from './store/index' new Vue({ el: '#app', router, store,//这个store是刚才创建的index文件引入的 template: '<App/>', components: { App } })

这样做就是为了把 store 对象分离出去，方便管理，但是你会发现这个 store 对象是全局的所有组件都可以使用，如果我们的组件多了，数据多了，全部堆放在一起，是不是特别臃肿，所以现在我们就该使用 modules 了。 首页我们新建一个js文件存放一个组件可能用到的 store 对象，比如我新建 head.js，在这里我们不需要引用 vuex 了，只需要默认 export default就行了

//head.js export default { state: { count: 0 } }

然后我们把在 index.js 中使用 modules

import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); import HeadStore from './heade';//引入刚才的heade.js export default new vuex.Store({ modules: { Heade: HeadStore } })

现在我们管理起来就方便多了，比如还有其他的呢,我们放在 modules 下就可以了，比如，我们除了 head.js 里管理的是一个组件的 store对象，我们还有一个 content.js 来管理另外一个组件的 store 对象，那么我们在 store 文件夹下载新建一个 content.js,和 head.js一样，只需要默认输出就可以了。

//content.js export default { state: { cont: '这是content内容' } }

然后我们在 index.js 中引入挂在 modules 下就可以啦

//index.js import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); import HeadStore from './head' //引入刚才的head.js import ContentStore from './content' //引入content.js export default new vuex.Store({ modules: { Head: HeadStore,//挂载 Content: ContentStore//挂载 } })

这样是不是方便多了，但是怎么用呢，很简单，现在需要通过modules去找他，之前的方法：改成$store.state.Head.count就行了，很明显这是找到了head.js下的count值，那么找content.js下cont的值呢？一样的，换一下modules的名就行$store.state.Content.cont

<template> <div id="app"> <!--head组件--> <p>{{$store.state.Head.count}}</p> <br> <!--content组件--> <p>{{$store.state.Content.cont}}</p> </div> </template>

输出结果分别为：0，这是content内容

六、那么接下来你觉得问题解决了吗，难道你们的项目组件所有的状态都用这一个，那如果我需要动态的改变他的状态呢，怎么办？没事，这不 mutations 来了吗，问题就好多了,怎么用呢，这是干嘛的呢，说白了就是动态的改变 state 的值完成页面的同步渲染，看看用法吧，直接在state对象后面加就行了

//head.js export default { state: { count: 0 }, mutations: { Count(state){ state.count +=10; } } }

解释一下，mutations 对象是函数，默认传值是 state，也就是上面的state，所以可以直接操作 state.count，怎么用呢，很简单，比如页面有一个按钮，点击改变state的count的值

<input type="button" @click="$store.commit('Count')" value="数字叠加">

此时输出结果为：10 commit('Count ')调用mutations的固定方法，参数为mutations的方法名，当然commit不止传一个参数，也可以传很多，比如：

<input type="button" @click="$store.commit('Count',10)" value="数字叠加">

可以在head.js的mutations下Count方法接收它

//head.js export default { state: { count: 0 }, mutations: { Count(state,n){ state.count +=n; } } }

此时输出结果为：20

到这一步为止，我们已经可以正常的动态的修改 state 来渲染在页面了，你会发现，mutations 是同步的，只要你在一个组件执行mutations 的方法了，那所有的组件只要用到 mutations 的方法都会同步进行改变，这并不是我们想要的结果，所以，actions 来解决问题了，写法一样

//head.js export default { state: { count: 0 }, mutations: { Count(state,n){ state.count +=n; } }, actions: { Account(context){ context.commit('Count'); } } }

接着解释，actions 和 mutations 的写法一样，都是函数，但是 actions 的默认参数是context，context.commit('Count ')的意思是触发mutations下的Count函数，那么怎么触发actions的函数呢，方法就是

<input type="button" @click="$store.dispatch('Account')" value="数字叠加">

dispatch 方法是官方固定触发 actions 下函数的方法。官方推荐 , 将异步操作放在 actions 中

还有一个属性我觉得也没有必要说了，getters,解释一下它的作用 getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的。比如我们 head.js 的 state 有一个值 show:false getters就是计算与false相反的，但是它计算的值是不能直接修改的， 需要对应的 state 发生变化才能修改。

//head.js export default { state: { count: 0 }, mutations: { Count(state){ state.count +=10; } }, actions: { Account(context){ context.commit('Count'); } }, getters: { not_show(state){ return !state.count; } } }

它也是默认接受state 最后一点就是为了方便操作开发，一般情况，$store.state.Head.show写起来不是很方便，那么vuex的辅助函数mapState、mapGetters、mapActions就可以解决这个问题，把 store 对象那个映射到this。我们只需要用到的组件中这样写：

<!--HelloWorld.vue--> <template> <div class="hello"> <span>我是HelloWorld组件中的count值：</span> <p>{{num}}</p> </div> </template> <script> import { mapState } from "vuex" //引入mapState export default { name: 'HelloWorld', props: { }, data(){ return { num:"" } }, computed:{ ...mapState({ count:state=>state.Head.count //映射 }) }, created() { this.num = this.count; //使用 }, methods:{ } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

现在我们就直接可以用 this.count 去找到 state 下count的值了，created方法是页面刚载入加载完事执行的方法，完后动态的赋值给msg，mapState一般放在computed计算属性中，mapActions一般放在methods下。

七、最后复盘 1、Vuex是数据和视图层解耦的框架 2、在单页和小项目中没有必要使用Vuex。 3、Vuex中的State就像一个全局的数据仓，里面存放着数据源。 4、Vuex中的Getter 用来在获取数据源的时候，对数据源进行一定的加工后再返回。 5、Vuex中的Mutation用来对数据仓中的数据，进行修改。Mutation只支持同步方法。 6、Vuex中的Action和Mutation类似，他们之处在于：1、Action 提交的是 mutation，而不是直接变更状态。2、Action 可以包含任意异步操作。 7、Vuex中的Module可以将Store模块化，然后通过Module整合在一起。

到这一步为止vuex的学习使用就结束了，你可以尽情的去操作数据了，也不用担心会混乱。

参考并感谢： 链接：https://juejin.im/post/5b323cd36fb9a00e6b3ca3bf 链接：https://segmentfault.com/a/1190000020912384