Vuex是实现组件全局状态(数据)管理的一种机制,vuex的出现是为了解决web组件化开发的过程中,各组件之间传值复杂和混乱的问题。
使用vuex统一管理状态的好处:
1.能够在vuex中集中管理共享的数据,便于开发和后期进行维护
2.能够高效的实现组件之间的数据共享,提高开发效率
3.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新
1. 将想要全局存储的数据存放在state中
state: {
vuex_user:{
name:'oange',
age: 16,
}
},
2. 只有Mutation才有权利修改state中的数据,但是只能包含同步的操作
/* payload载荷 */
mutations: {
Muser(state,payload) {
// state.vuex_user[name] = 'payload';
Vue.set(state.vuex_user,'name',payload)
}
},
3. Action是处理异步操作的,也可以改变store中的数据,不过需要通过mutation
/* context 上下文 */
actions: {
Auser(context,payload) {
// 模拟异步操作
setTimeout(()=>{
context.commit('Muser')
},1500)
}
},
4. Getter对Store中的数据进行加工处理形成新的数据,它只会包装Store中保存的数据,若state中的数据需要经过处理,然后再显示到页面的情况,可以在此处进行处理
getters:{
}
使用方式,以index.vue为例。
import { mapState, mapMutations, mapActions } from 'vuex';
// 映射 this.vuex_user为 store.state.vuex_user
computed:{ ...mapState(['vuex_user']) },
methods: {
// 将 this.Muser() 映射为 this.$store.commit('Muser')
...mapMutations(['Muser']),
// 将 this.Auser() 映射为 this.$store.dispatch('Auser')
...mapActions(['Auser']),
},
若要使用,直接加this使用即可,例
this.vuex_user
this.Muser()
this.Auser()
PS:由于偏爱辅助函数的写法,故此处不对其他写法做过多解释,详情见官网。