前端真的让人头疼，程序越来越复杂。所以，我们要盯着应用的状态。你知道最近很火的那个Vue.js吗？它还有个超级好用的工具叫做Vuex，专门用来管理组件状态的。今天我就来给你讲讲Vuex到底是什么，怎么用，一起来学！
分离业务逻辑和状态管理
npm install vuex --save import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex)
创建 Vuex Store
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
}
},
actions: {
incrementAsync(context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
},
getters: {
evenOrOdd(state) {
return state.count % 2 === 0 ? 'even' : 'odd'
}
}
})
new Vue({
el: '#app',
store,
computed: {
count() {
return this.$store.state.count
},
evenOrOdd() {
return this.$store.getters.evenOrOdd
}
},
methods: {
increment() {
this.$store.commit('increment')
},
decrement() {
this.$store.commit('decrement')
},
incrementAsync() {
this.$store.dispatch('incrementAsync')
}
}
})
在开始玩Vuex前，得首先来个store，也可以说是Vue的好朋友~这个store里面有很多宝贝，比如state（就是咱们的数据宝库啦）、mutations（就是那些同步修改的魔法）、actions（处理各种异步任务的能手）和getters（就像是个聪明的小算盘，会根据状态生成缓存）。
State 状态管理
你有听说过Vuex里那个名叫State的东东么？这就是我们用来保存APP随时可能变掉的数据滴。但是要记住，别乱改State，否则Vuex的响应系统可能会失灵喔。那么如果真的需要改？这时候就可以用到Vue.set这个神奇的小技巧，这样你的屏幕也能跟着一起变化！
Mutations 同步修改 State
变化，就像Vuex里面换衣镜那样，随便扭几下就能变化，简直察觉不出来。别管那么多，别折腾其他花样（比如异地同步什么的）或者搞出副作用来，这样才能保证状态清楚，一眼就看到哦～
Vue.set(state.obj, 'newProp', 123)
Actions 异步操作与提交 Mutations
有时我们需要做点费时的事，例如在网上填写表格之类。这时候Action就要上场，而且还有mutations小帮手帮你改改状态里的数据。Action就像百宝箱一样，先把信息全放进去，然后让mutations兄弟们一起搞定状态的每一处！
Getters 计算属性
this.$store.commit('increment') // 传入 mutation 的名称
this.$store.commit({
type: 'increment',
amount: 10 // 传入额外的参数
})
Getter其实和我们平时看到的计算器差不多，就是功能更全些。它能够自动更新库存数据，让你省去复杂的计算过程。以后再遇到类似的计算问题，只需打开Getter就能找到答案，方便快捷！
Module 模块化管理
actions: {
incrementAsync(context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
}
在组件中使用 Vuex
学习如何在Vuex中玩转组件首先要懂四个概念：state（状态）、mutations（改变）、actions（操作）和getters（获取）。其实不用担心，只要熟悉哪些叫mapState、mapMutation、mapActions和mapGetters的小帮手，就可以轻松搞定模块或全局状态中的数据了！
this.$store.dispatch('incrementAsync')
Vuex 的注意事项
用Vuex的话，有几点需要注意！首先，处理异步的时候，主要靠actions和mutations，记住它们的用法很重要！其次，用getters可以提高速度，这个功能挺实用的。还有就是，别忘了用mutations来改变状态，不能直接改state。只要掌握好这些，用Vuex就会变得简单很多，代码也更容易维护和扩展~
getters: {
evenOrOdd(state) {
return state.count % 2 === 0 ? 'even' : 'odd'
}
}
哎呦说白了，Vuex就是Vue专门为我们这些码农打造的一个全能的状态管理神器，它对咱们整个项目的影响可是大得很！想了解为啥Vuex这么牛逼吗？赶紧来看文章！只要搞懂state、mutations、actions、getters以及module这几个关键词，你就可以轻松驾驭Vuex，管理并共享应用里的各种状态，让代码更清爽，编程更顺手。
你用过vuex吗？用的时候有没有什么困扰的地方呀？跟我分享下哈~
this.$store.getters.evenOrOdd
评论0