1、Vuex概述
Vuex是实现组件全局数据管理的一种机制，可以方便的实现各个组件之间的数据共享问题
偷了一张图：
# 左边的图是没有使用vuex的时候：
这个时候我们组件之间如果需要传递数据的话，那么在模块多的情况下，传递关系错综复杂，难以维护。
# 右边的图是使用vuex的时候：
这个时候我们组件之间如果需要传递数据的话，那么在不管模块多少，共享数据都是通过vuex的store来进行存取，这样就统一管理了我们的共享数据，便于数据的管理和后期维护。
使用vuex的好处：
# 1、能够集中的管理组件之间的共享数据，易于开发和后期维护
# 2、vuex中存储的数据都是响应式的，能够实时保持数据与页面的同步
什么样的数据适合存在vuex中：
只有组件之间必须要共享的数据才适合存在vuex中，例如身份验证的token，那么这个就要存在vuex中，那么例如一个表格的数据，那么这种就不适合存在vuex中。
以前看过别人的博客，我记得很清楚的一句话：**不要因为要用vuex而去用vuex**。
2、Vuex的配置
# 1、安装vuex
npm install vuex --save
# 2、导入vuex
import Vuex from 'vuex';
# 3、使用vuex
Vue.use(Vuex);
# 4、创建Store对象
/* Vuex */
const store = new Vuex.Store({
state:{count: 0} // state中存放的就是共享的数据
})
# 5、将Store对象挂载到Vue实例上，那么所有组件中就都可以使用Store对象
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
store:store
})
当然我们的store:store这个后面的可以忽略
3、Vuex的核心概念
vuex的核心概念也就是vuex的实际操作大概是什么。
State、Mutation、Action、Getter
3.1、State
State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。
例如我们现在的Store是这样的：
/* Vuex */
const store = new Vuex.Store({
state:{count: 0} // state中存放的就是共享的数据
})
组件中访问Store中State数据的方式：
第一种方式：
this.$store.state.全局数据名称
第二种方式：
1、首先需要导入mapState函数：
import { mapState } from 'vuex'
2、将全局数据，映射为当前组件的计算属性：
computed: {
/* ...mapState(['全局数据名称']) */
...mapState(['count'])
}
3.2、Mutation
Mutation用于更改State中的数据。
# 注意：
1、只能通过Mutation的方式来更改State中的数据，不要问为什么，问就是不知道(悄悄告诉你，是因为官方认为这样更加的规范)
2、虽然操作繁琐，但是能很轻易的知道组件内对State修改数据的操作都是什么
1、第一种使用方式：
定义mutations：
/* Vuex */
const store = new Vuex.Store({
state:{count: 0}, // state中存放的就是共享的数据
mutations:{ // 定义mutations
// 增加count的值
add(state){ // 第一个参数永远都是State对象，如果需要加入参数则add(state,参数...)
state.count++; // 使用state对count数据进行改变
}
}
})
在组件中触发mutation：
//this.$store.commit('方法名'),
//如果带有参数则this.$store.commit('方法名',参数...)
this.$store.commit('add');
2、第二种方式：
mutations：
const store = new Vuex.Store({
state:{count: 0}, // state中存放的就是共享的数据
mutations:{ // 定义mutations
// 增加count的值
add(state,num){ // 第一个参数永远都是State对象，如果需要加入参数则add(state,参数...)
state.count+=num; // 使用state对count数据进行改变
}
}
})
首先导入：
import { mapMutations } from 'vuex
然后映射为当前组件的methods：
methods:{
...mapMutations(['changeCount'])
}
然后使用:
<button @click="this.changeCount(5)"></button>
3.3、Action
用于处理异步任务，如果我们要通过异步来操作State中的数据，那么就得直接调用Action，然后再由Action去调用mutation
定义Action：
actions: { // 用来指定异步任务的操作
syncChangeCount(context,num) { // context对象的commit方法用来执行mutations中的方法
setTimeout(() => { // 延时1.5秒再去提交执行changeCount方法
context.commit('changeCount',num);
}, 1500);
}
}
调用Action：
// 第一种执行的方法
this.$store.dispatch('syncChangeCount',1);
// 第二种执行的方法
import {mapActions} from 'vuex' // 导入
...mapActions(['syncChangeCount']) // 在methods下映射方法
@click="syncChangeCount(-1)" // 像调用自己的方法一样去调用即可
3.4、Getter
对State中的数据进行加工处理后形成新的数据
# 1、Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
# 2、Store 中数据发生变化， Getter 的数据也会跟着变化。
定义,在vue实例中加入这个：
getters:{ // 对State中的数据进行加工处理后形成新的数据
showCount: state => {
return '当前的count值为:'+state.count;
}
}
使用:
// 第一种方式,this.$store.getters.方法名
this.$store.getters.showCount
// 第二种方式
import {mapGetters} from 'vuex' // 导入getters
computed:{
...mapGetters(['showCount']) // 定义在computed中
}
{{showCount}} // 直接使用
3.5、上方测试的源码：
下载后先npm install，然后就可以npm run dev
4、Vuex的案例
要求：
① 动态加载任务列表数据
② 实现文本框与store数据的双向同步
③ 完成添加任务事项的操作
④ 完成删除任务事项的操作
⑤ 动态绑定复选框的选中状态
⑥ 修改任务事项的完成状态
⑦ 统计未完成的任务的条数
⑧ 清除已完成的任务事项
⑨ 实现任务列表数据的动态切换
代码下载地址：
files.cnblogs.com/files/daihang2366/demo3.zip
先npm install，然后npm run dev即可
