Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex 可以帮助我们管理共享状态。
State : 唯一数据源,定义的变量都在这里面
Getter : 从State中派生出来一些状态(可以认为getter是store的计算属性),只有当它的依赖被改变时才会触发
Mutation: 更改store中状态的唯一方法,Mutation必须是同步函数
Actions : Actions类似于Mutation。不同点:Actions提交的是Mutation,而不是直接更改状态,Actions可以包含任何异步操作
目录结构:
homeInfo.js文件内容
const state = {
homeInfoData: ''
};
const getters = {
homeInfoDataMap (state) {
return state.homeInfoData;
}
}
const mutations = {
updateHomeInfoData (state, payload) {
console.log('payload', payload);
state.homeInfoData = payload;
}
};
const actions = {
updateHomeInfoData ({commit, state}, usersInfo) {
commit('updateHomeInfoData', usersInfo)
}
}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
index.js文件内容
import Vue from 'vue'
import Vuex from 'vuex'
// import createPersistedState from 'vuex-persistedstate'; //持久化数据状态,防止刷新vuex数据丢失
import homeInfo from '@/store/modules/homeInfo.js'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
homeInfo
}
// plugins: [createPersistedState()],
})
vueX数据的读取和赋值
import { mapActions } from 'vuex';
methods: {
...mapActions('homeInfo', ['updateHomeInfoData']),
clickBtn () {
this.updateHomeInfoData('update'); // 更新数据
console.log('homeInfoData', this.$store.state.homeInfo.homeInfoData)
}
}