要想知道什么情况下适合使用Vuex，就要先知道Vuex是什么。
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每日一题
网友评论