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

2.获取vuex中的数据

3.设置vuex中的数据

4.刷新之后，保留数据

数据结构

index.js

transaction.js模块

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

获取vuex中的数据

设置vuex中的数据

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

也可以使用mapState,mapGetters,mapActions

安装

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

import service from '../service.js'

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {

    /**

     * 是否需要强制登录

     */

    forcedLogin: true,

    hasLogin: false,

    userName: "",

msg: {}

  },

  mutations: {

    login(state, userName) {

      state.userName = userName || '新用户'

      state.hasLogin = true

    },

    logout(state) {

      state.userName = ""

      state.hasLogin = false

service.removeUser()

    },

setmsg(state, msg) {

state.msg = msg

}

  }

})

export default store

———————————————————————————————————————————————————————————————

引入：import {

             mapState,

             mapMutations

          } from 'vuex'

设置值：

              methods: {

                    ...mapMutations(['login', 'setmsg']),

              }

              let userMsg = {

                       user_grade: data.data.user_grade,

                       discount_rate: data.data.discount_rate

              }

  that.setmsg(userMsg)

获取值：

            computed:{

                ...mapState(['forcedLogin', 'hasLogin', 'userName','msg']),

            }

            this.msg(就可以出来了)