点击“前端自学社区”查看更多精彩
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用，如果你读了前三篇文章的话，并且掌握差不多，那么你现在可以开发简单的应用了，例如Blog，电商网站........唯一不足的是，随着你的业务需求不断增加，页面中的状态数据也不断庞大，维护起来就特别困难了，Vue 提供了一种状态管理 解决办法 -Vuex，它的思想和React 的Redux 很像，页面中的数据和逻辑都交给了store来管理了，这样的好处就是，维护方便，单个组件代码也整洁不少。
结尾：有 大彩蛋 ，Vuex 理解稍微有些难理解，所以这期我为了能更好的理解，我录制了视频讲解，根据一个实际案例TodoList 来 实现Vuex 的基本使用，演示的功能主要是为了可以更好的理解Vuex 核心概念。
其中，片头开始我对比了不使用Vuex 的项目，代码结构是怎样的，使用后是怎样的。由于 第一次 录制视频，有不足，稍有见谅。
到此，Vue 系列文章就结束了，Vue 全家桶已经讲完了，如果你跟着读了这前几篇文章的话，你现在就可以实操的写一个项目来体验一下Vue的魅力。Vue 使用熟练可以了的话，下一步你应该进阶更高一层了，那就是研究Vue 源码。只有清楚原理了，自己造轮子玩那才有意思，对应你的money 也提高了，lavel 也 提升了，加油吧， 小伙伴们。
Vuex
安装
npm install vuex --save
yarn add vuex
// Vuex 依赖 Promise，所有需要安装 es6-promise
npm install es6-promise --save
yarn add es6-promise
Vuex 介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 。
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0,
message: '测试信息'
},
mutations: {
},
actions: {
},
modules: {
}
})
State ------>驱动应用的数据源
1.在组件中 获取store 中的state 数据
1. 在组件中 获取store 中的state 数据
// 一般是 通过计算属性中声明属性，然后使用 this.$store.state.数据源 来获取数据的
computed: {
count () {
return store.state.count
}
}
如何获取多个state呢？
如果想获取多个state数据呢，其实可以在computed 中写多个属性 来获取state，但是当state变化时，会重新求取计算属性，并且触发更新相关联的 DOM，非常影响性能。
好在Vuex 提供了
mapState辅助函数，减少不必要的开销
1. 首先第一步 必须引入 mapState
import { mapState } from 'vuex'
2. 在computed 使用即可
computed: mapState({
counts: state => state.count,
//counts为自定义的属性：state参数 是stote中的state，然后直接通过state。数据源获取即可
addNumber (state) {
return this.numbers + state.count
}
})
3. 在页面 直接使用 自定义的属性
Getter
作用类似 computed，但有缓存功能。
使用场景： 当一个组件需要过滤后的state值，你可以在组件中通过filter进行过滤，那么其它组件也需要过滤后的值，你就的再 次过滤state。
当使用getter 处理后，一次处理，多次使用，提高效率
export default new Vuex.Store({
state: {
count: 0,
message: '测试信息',
arr: [1, 2, 3, 4, 5, 6]
},
getters: {
filterArr: state => {
return state.arr.filter(items => items % 2 === 0)
}
}
})
mapGetters 辅助函数
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
在组件中访问getter 值
this.$store.getters.自定义的属性
在 其它 组件访问该getters 时，值仍然是 [ 2, 4, 6 ] 过滤后的
Mutation
Mutation 是用来更改Store的状态的唯一方法。
它由 事件类型 和 回调函数构成。回调函数是用来更改state状态的，参数为state
使用mutation：
必须在 mutation中注册事件，
然后在组件中通过
store.commit(事件名)来 触发改变state的状态注意：
store.commit 参数
store.commit 接收两个参数
第一个参数为：store.mutation中的事件名
第二个参数为：要传递的 载荷
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
mapMutations辅助函数
mapMutations辅助函数将组件中的 methods 映射为store.commit调用（需要在根节点注入store）。
对象的提交方式
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}store.commit({
type: 'increment',
amount: 10
})
Mutation 使用技巧
在多人协作开发时，随着 mutation 的 type 增多，会维护困难。
官方推荐采用 使用 事件类型，来处理,开发效率提高。
// mutation-types.js
export const SOME_MUTATION = 'SOME\_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
Action
Action 功能类似 Mutation，
Action 支持 异步操作
Action 提交的 mutation, 不是直接修改state状态
Action 接收参数： 与 store 实例具有相同方法和属性的 context 对象
实例
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
在组件中分发Action
this.$store.dispatch('xxx')
异步执行Action
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
mapActions辅助函数
Action 也支持载荷
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
Module 模块分割
当所有状态对象都集中在个大的对象中，store维护将变得困难。这时，可以使用模块分割成多个对象，最后将对象挂载到store的modeule中,Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
彩蛋环节
ES6_11_Module 的语法(import, export,export default )
ES6系列文章已经在公众号更新完
扫码关注，获取更多资料
扫描二维码， 回复 ‘ 加群 ‘ 可以一起来学习
原创不易 觉得不错的话点一下 **在看↓** 😝