Vuex实践

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)
    }
  }