20190121
什么情况下适合使合 vuex？Vuex 使用中有几个步骤？
开始之前先简单了解一下 vuex
定义: vuex 是一个状态管理机制, 采用集中式存储应用所有组件的状态
嗯，就是一句话能说明白的，没明白的，我们用代码再理解一下什么叫集中式式存储
比如下面这段代码，同时需要用到 username，那么我们首先能想到就是在两个组件内都进行一次获取 username 的操作, 这种操作是有明显弊端的, 如带宽资源浪费，代码不好维护等等
// a.vue
<template>
<div>{{username}}</div>
</template>
// b.vue
<template>
<div>{{username}}</div>
</template>
那么集中式是什么概念呢，就是把整个应用的状态独立出来当成一个树形结构管理，所有叶子数据的更改都使用唯一的通道进行操作，下面用代码再来理解一下
// a.vue
<template>
<div>{{username}}</div>
</template>
// b.vue
<template>
<div>{{username}}</div>
</template>
<script>
computed: {
username () {
// store 就是我们应用的集中管理器, 跟组件解藕，需要的时候就用到，叫即插即用
return store.state.count
}
},
</script>
什么情况下适合使合 vuex
老生常谈的话题，每个人的使用动机不同可能结果就不同，站在系统架构的角度上来，vuex 虽然能很好帮助我们管理状态, 但随之也带来更多的概念让我们花时间来消化，一般情况下我们会根据项目的实际大小来决定是否需要引入 vuex
Vuex 使用中有几个步骤
先上一张图理解一下 vuex 工作的流程
从图中我们可以看到 vuex 包含了 3 个关键词
state
actions
mutations
只要知道就行，后面再展开讲
先看下最简单使用 vuex 的方式
// store.js
// store 中管理 store 以及 mutations, 然后在组件中通过 commit 来触发 store 中 mutations 的方法
const store = new Vuex.Store({
state: {
name: ‘JS’
},
mutations: {
updateName (state) {
state.name = ‘JS 每日一题 ’
}
}
})
// a.vue
store.commit(‘updateName’) // JS 每日一题
state
字面意思就是状态，上面也说了 vuex 是集中式管理，那么在这里就理解成为集中管理的状态 (全局可使用状态)
组件中获取状态可以通过以下方式
const Demo = {
template: `<div>{{name}}</div>`,
computed: {
name () {
return store.state.name
}
}
}
// 也可以通过 mapState 辅助函数来获取
computed: mapState({
name: state => state.name
})
// 引入多个 state 可以通过对象展开运算符来获取
computed: {
…mapState({
name
// …
})
}
mutations
更改 vuex 中的 store 的唯一途径就是 mutation, 且必须是同步函数
代码理解
// 首先 mutations 是一个对象
// 下面的 updateName 展开写就是 updateName : function(){}, 在 vuex 叫做 Type Handler
// 根据上一条的解释，所以会看到很多 mutations 的写法类 [GET_USER_INFO] : (state) => {}
// 你不能直接调用 mutations.updateName, 因为 mutations 只负责注册事件, 需要通过 store.commit(type) 来唤醒对应 type 的 handler
// Mutation 需遵守 Vue 的响应规则, 也就是说没有被 Object.defineProperty 劫持到的 state 不会响应式, 比如你有一个 state 为 obj = {}, 然后你通过 mutation 来为 obj 新增一个属性，
这时候你需要替换原有的 obj 组件才会正常响应，
常用的方式可以通过 Object.assign()
mutations: {
updateName (state) {
state.name = ‘JS 每日一题 ’
}
}
// 组件中可以通过 mapMutaions 辅助函数来映射关系
// 下面等同于 this.updateName() this.$store.commit(‘updateName’)
methods: {
…mapMutaions([
‘updateName’,
…
])
}
Action
Action 类似于 mutation，提交的是 mutation，而不是直接变更状态。简单来说就是 mutation 只负责同步操作，action 负责异步操作
mutations: {
updateName (state) {
state.name = ‘JS 每日一题 ’
}
},
actions: {
// context 是一个具有 store 实例相同方法和属性的对象
getUserInfo (context) {
setTimeout(() => {
commit(‘updateName’)
}, 1000)
}
}
// 组件中可以通过 mapActions 辅助函数来映射关系
// 下面等同于 this.getUserInfo() this.$store.commit(‘getUserInfo’)
methods: {
… 组件中可以通过 mapActions([
‘getUserInfo’,
…
])
}
总结
vuex 是一种状态管理机制，将全局组件的共享状态抽取出来为一个 store，以一个单例模式存在，应用任何一个组件中都可以使用，vuex 更改 state 的唯一途径是通过 mutation，mutation 需要 commit 触发, action 实际触发是 mutation，其中 mutation 处理同步任务，action 处理异步任务
关于 JS 每日一题
JS 每日一题可以看成是一个语音答题社区 每天利用碎片时间采用 60 秒内的语音形式来完成当天的考题 群主在次日 0 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题