接上篇《24.Vue UI框架 ElementUi 按需引入》
上一篇我们讲解了如何按需引入ElementUI，至此vue系列已经基本介绍完毕，本篇我们来介绍vue的升级版vuex。
本系列博文使用的Vue版本：2.6.11
vuex官方网站：https://vuex.vuejs.org/zh/
一、Vuex 是什么？
下面是Vuex官方网站上对Vuex的介绍：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
这里简单总结一下，其实Vuex就是用来管vue的，管它的什么呢？就是管它的组件状态和一致性，这里很多童鞋可能还不是太明白，我们来通过例子说明一下：
如上图（图片出自页底视频教程）的组件关系，其中的“首页”和“新闻”页面，它们既不是父子组件，也不是兄弟组件，因为它们既没有上下级关系，也没有相同的顶级父组件，那么这两个组件之间如何传值？如何保持状态的一致性呢？
通过之前的学习我们知道，父子组件之间的传值，可以通过“this.$parent”、“this.$refs”获取父子的值或属性，兄弟组件之间可以通过“根组件广播数据”来进行值或方法的传递，像非父子和兄弟的组件，虽然可以通过路由进行传值，但是传递的东西是有限的（get请求有限制），此时就需要通过vuex的管理来实现了。
一句话，vuex主要解决的就是不同组件之间的数据共享、数据持久化的问题。
（小声说一句，其实vuex能实现的，通过之前学习的Localstrage和SessionStorage都可以实现。一般小项目中使用这两个小兄弟就行了，大型项目便于管理，可以使用vuex。）
二、Vuex的使用
Vuex有“State”、“Getters”、“Mutations”、“Actions”、“Modules”几种核心概念，下面一一讲述一下。
（简单一句话描述：State是组件的状态，Getter是State的计算属性，Mutation是方法，可以改变State的数据，Action用来触发Mutation去改变State的数据，Module用来将不同状态分割成模块。）
这里的详细描述大家去看官方文档即可，这里我们通过一个实例来了解Vuex的使用。
1、安装vuex
在项目所在的文件夹目录下，执行安装指令：
npm install vuex --save
2、新建Vuex文件夹和store.js
在项目的src目录下，新建一个名为“vuex”的文件夹，便于单独管理vuex的相关内容，然后在该文件夹下新建一个store.js文件：
3、在store.js引入vuex，设置关键属性
store.js我们可以理解为仓库，用来存放核心组件和常用组件的。
我们在store.js文件中来分别引入vue和vuex，并设置关键属性：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/**1.state在vuex中主要用于存储数据 */
var state={
count:1
}
/**2.mutations里面放的是方法，主要用于改变state里面的数据 */
var mutations={
incCount(){
++state.count;
}
}
//3.定义store
const store = new Vuex.Store({
state,
mutations:mutations
})
//4.暴露store
export default store;上面我们设置了存储数据的state，改变state数据的mutations，然后定义和暴露包含这两个属性的store对象。这里我们在state放了一个“count”值，默认为1，然后在mutations定义了一个名为“incCount”的方法，只要调用这个方法，“count”值就会自增一次。
（注：这里暂时仅使用了state和mutations，当然还有一些其他属性）
下面我们来使用vuex，在不同组件中获取和改变store中state的参数的值。
4、在组件中使用store
（1）一个组件引入Count计数值
我们在之前的Helloworld.vue首页中引入store（之前的代码都先删除了），然后在data区域直接声明store，然后就在template区域直接引用store中的数据，同时也可以在方法中调用store中的“incCount”方法：
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div class="hello">
<h1>{
{ msg }}</h1>
State中的值【Count】：{
{this.$store.state.count}}
<br/>
<button @click="incCount()">增加数量</button>
</div>
</template>
<script>
import store from '../vuex/store.js'
export default {
name: 'HelloWorld',
data () {
return {
msg: '首页父组件'
}
},
store,//这里如果store是其他名字，要写成store: store1
methods:{
incCount(){
//改变vuex store里面的数据
this.$store.commit('incCount');//触发mutations定义的方法
}
}
}
</script>
<!-- 添加 "scoped" 属性来限制里面css样式只能被该组件引用 -->
<style scoped>
h1{ color:red;}
</style>这里相当于编写了一个显示并控制共享参数的一个组件，效果：
当点击增加数量的时候，count的值就会增加。
（2）另一个组件引入Count计数值
然后我们在用户页面User.js也引入这个Count计数值：
<template>
<div id="user">
<div class="user-info"><div class="left">
<ul>
<li><router-link to="/user/userList">用户列表</router-link></li>
<li><router-link to="/user/userAdd">新增用户</router-link></li>
</ul>
State中的值【Count】：{
{this.$store.state.count}}<br/>
<button @click="incCount()">增加数量</button></div>
<div class="right"><router-view></router-view></div>
</div>
</div>
</template>
<script>
import store from '../vuex/store.js'
export default {
name: 'user',
data () {
return { msg: '用户中心' }
},
store,
methods:{
incCount(){
//改变vuex store里面的数据
this.$store.commit('incCount');//触发mutations定义的方法
}
}
}
</script>
<style scoped>
.user-info{ display: flex; }
.user-info li{ line-height: 20px; }
.left{ width: 200px; min-height: 400px; border-right: 1px solid #eee; }
.right{ flex: 1; }
</style>效果：
可以看到，两个不同组件之间通过Store实现了数据共享、方法共享。
下一篇我们继续介绍vuex的“Getters”、“Actions”等关键属性。
参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》
转载请注明出处：https://blog.csdn.net/acmman/article/details/113462230