模块化vuex，获取、设置数据，及刷新保留数据方法

前言

1.模块化vuex
2.获取vuex中的数据
3.设置vuex中的数据
4.刷新之后，保留数据

模块化vuex

数据结构

index.js

import Vue from "vue";
import Vuex from "vuex";
import transaction from "./modules/transaction";

Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [],
  modules: {
    transaction,
  },
})

transaction.js模块

const state = {
  productCode:'',

}

// getters
const getters = {
  getProductCode: state => {
    return state.productCode
  },
}

// actions
const actions = {
  setProductCode(conText, data) {
    conText.commit('setProductCode', data);
},
}

// mutations
const mutations = {
  setProductCode(state, data) {
    state.productCode = data
  },
}

export default {
  namespaced: true,//为了解决不同模块命名冲突的问题
  state,
  getters,
  actions,
  mutations
}

namespaced

注意：namespaced是为了解决不同模块命名冲突的问题,分两种情况来写

1. namespaced：true

获取vuex中的数据

<script>
import { mapState,mapGetters,mapActions } from 'vuex'
export default {
  data() {
    return {
      productCode:'',
    };
  },
  computed: {
    ...mapGetters({
      'getProductCode':'transaction/getProductCode',
    }),
  },
  watch:{
    getProductCode(){
      console.log(this.getProductCode)
      this.productCode = this.getProductCode;
    }
  },
};
</script>

设置vuex中的数据

<script>
import { mapState,mapGetters,mapActions } from 'vuex'
export default {
  data() {
    return {
    };
  },
  methods: {
    ...mapActions({
      setProductCode:'transaction/setProductCode',
    }),
    getData() {
          // this.$store.dispatch('transaction/setProductCode', 1)
            this.setProductCode(1)
        }
      });
    },
};
</script>

2. namespaced：false

如果将namespaced设置为false，则需要注意命名不能重复

• 获取：this.$store.state.productCode
• 设置：this.$store.dispatch('productCode'，‘1)

也可以使用mapState,mapGetters,mapActions

<script>
import { mapState,mapGetters,mapActions } from 'vuex'
export default {
  data() {
    return {
    };
  },
  computed: {
   ...mapGetters(["getProductCode"]),
  },
  mounted(){
     ...mapActions(["setProductCode"]),
     console.log(this.getProductCode)//获取
     this.setProductCode(1)//设置
  },
};
</script>

---

刷新之后，保留数据

安装

npm install vuex-persistedstate  --save-dev

修改index.js配置，将数据保存到sessionStorage

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
import transaction from "./modules/transaction";

Vue.use(Vuex);

export default new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage,
        reducer(val) {
          return {
            // 需要储存的数据
            transaction:val.transaction,
          }
        }
    })],
  modules: {
    transaction,
  },
})