认识Vue和Vuex
Vue前端框架超级好用，简单直观，效率又高，网页搭建就像堆积木一样，各部件都有自己的功能。那如果各个模块间要交互？别怕，这时候Vuex就派上用场了，它可以全权负责每张页面上对象的状态和最新的动态。
Vuex的作用
编代码真的好烦恼哦有时，尤其是各个部分的数据和状态不知道咋交流。哎呀别紧张，Vuex来帮你，把所有的状态整到一起去，这样就不用烦心数据怎么传，简单快速地看清问题了。这样做，管理也变得很轻松，大家分享使用数据也更快了。重要的是，追踪数据变动不再是个头疼事！
安装和配置Vuex
npm install vuex
搞定Vuex，用npm或者yarn安装都行记着，在你的主文件（主要就是那个main.js网页文件啦）里加上vuex，然后就开始用起来。
咱们首先定义个”计数器状态” count，然后想想怎么让它往上加。接下来动手实现incrementAsync和getCount这两个功能。
赶紧来了解和掌握mapState, mapMutations, mapActions以及mapGetters这四大神器！
Vuex让你随意调节组件！只需要借助MapState、Mutation和Action这三兄弟，就能将Vuex里的所有数据、改变数据的mutation还有整个交互过程的action都搬到组件中。这下子，随时随地找全局状态so easy，而且还懂得怎么修改它，简简单单就能理解！
实例：在组件中使用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建Vuex实例
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
},
getters: {
getCount: state => state.count
}
})
new Vue({
store,
render: h => h(App)
}).$mount('#app')
记好你的住址，这样无论哪儿都能找到了比如现在，我们用state.count代表计数器的值。接下来，用mapMutations和mapActions来表示“+1”（actions.increment）和“异步+1”（actions.incrementAsync），想怎么修改就怎么修改
步骤总结
想要把所有组件共享的数据搞整齐？真心简单，只需要装个 Vuex，再按我说的做就行！1.在 Vuex里设好”状态”(state)、”变通”(mutations)、”动作”(actions)和”探询”(getters)四大配件；2.用强大的 mapState、mapMutations、mapActions和mapGetters这几招，把这四样设备搬到你的组件里去；3.搞定后就在组件里自由自在地跟那些全局性质状态打交道，这就齐活儿~统一数据就这么容易！
Vuex优势与应用场景
看来Vuex跟全局组件搭配使用真的很好使！就像在玩堆积木游戏一样，看着代码清爽又明白，一点儿也不难懂。尤其在搞一些高大上项目又又是组件繁杂的时候，Vuex就能帮你知道所有数据怎么来来回回的，再也不用担心消息传不过去的问题咯~
Vuex核心概念深入解析
省提这么多我们APP要用的信息，包括你们分享的那些。
出状况了（mutation）就得把你的状态搞乱套，用同步函数记得注意！
做活儿，就是在发送mutation的时候顺带加载网页和联网取数据。
import { mapState, mapMutations, mapActions } from 'vuex' export default { computed: { ...mapState(['count']) }, methods: { ...mapMutations(['increment']), ...mapActions(['incrementAsync']) } }Count: {{ count }}
获取器就是稍微算点数的属性，用来在取状态值的时候搞些操作。
Vuex进阶应用
除了基本概念外，还有一些进阶应用技巧：
假如你的APP庞大无比的话，给商店分分类可就轻松多！
2.插件扩展：编写插件对vuex进行扩展。
开启老妈子模式，就好像提前考虑下，别忘了关注下会不会突然生病。
Vuex与其他状态管理工具比较
Vuex和Vue真的配，简直就是天生一对！它还能搞定响应式设计，用起来就像呆在家里一样亲切。跟其他框架相比，我觉得它更加管用，更符合咱们的实际需要。
结语
看了这篇文章，你就可以搞定Vuex里面的全局组件通信。知道这些，你写代码时会变得简单快捷！期待你能玩转Vue的全局状态管理功能，实战效果一定棒棒哒！
评论0