vuex分多个模块并解构vuex变量到vue页面的使用

一、vuex使用分模块管理

bigData.js模块的文件代码

const bigData = {
  state: {
    home_opts:{
      businessYearCard: {
        "arrived_revenue": 0,
        "new_contract_money": 0,
        "completed_out": 0,
        "profit": 0
      }
    }
  },
  mutations: {
    SET_HOME_OPTS: (state, [ key, value ] ) => {
      state.home_opts[key] = typeof key === 'object' ? JSON.parse(JSON.stringify(value)) : value;
    }
  },
  getters:{

  }
}

export default bigData

index.js文件引入并使用的代码

import Vue from 'vue'
import Vuex from 'vuex'

//框架自带的模块
import app from './modules/app'
import user from './modules/user'
import permission from './modules/permission'
import enhance from './modules/enhance'
import online from './modules/online'
import getters from './getters'
import routerContentCom from './modules/routerContentCom'

//自定义的模块
import bigData from './modules/bigData'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    user,
    permission,
    enhance,
    online,
    routerContentCom,
    bigData
  },
  state: {

  },
  mutations: {

  },
  actions: {

  },
  getters
})

二、vuex在vue页面中使用

//使用方法一：
console.log( this.$store.state.bigData.home_opts )

//使用方法二：导入vuex的辅助函数，调用this.home_opts
import { mapState } from 'vuex'

export default {
    computed:{
        ..mapState({
          home_opts: state => state.app.bigData.home_opts,
        }),
    }
}

//两种方法的区别：方法一可以直接修改vuex的state数据；使用辅助函数形式则无法修改

vuex属性说明

• state：全局共享变量
• getters：针对于state数据进行二次计算（类似vue中的computed计算属性）
• mutations：存放同步方法的
• actions：存放异步方法的，并用于提交mutations
• modules：把vuex分模块管理，如上面示例代码