关于Vuex

Vuex

vuex在 数据结构相同,取值不同时,可以通过把数据格式载入vuex中转站,在需要数据请求时,引入vuex中转站的数据结构,同时把请求的参数赋值给它,从而完成数据请求.
由于vuex有单独的js文件,管理起来更加清晰和系统.

Vuex的拓展写法

tu1.png

此处为目录结构

import Vue from 'vue'
import Vuex from 'vuex'
import account from './account'
import taskManage from './taskManage'
import workReport from './workReport'
import msg from './msg'
import statistics from './statistics'
import createLoggger from 'vuex/dist/logger'
import resource from './resource'

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
  modules: { account, taskManage, workReport, msg, statistics ,resource},
  strict: debug, // 开发环境下启用严格模式，
  plugins: debug ? [createLoggger()] : []
})

此处为store文件里的index.js根配置项

import state from './state';
import mutations from './mutations';
import * as getters from './getters';

export default {
  namespaced: true,
  state,
  mutations,
  getters
};        

此处为statistics下的index.js配置项

// 筛选日期
export const SET_SEARCH_DATE = 'SET_SEARCH_DATE'
// 报修来源
export const SET_REPAIR_RESOURCE = 'SET_REPAIR_RESOURCE'

此处为statistics下的mutationTypes.js配置项

import * as types from './mutationTypes'
const mutations = {
  [types.SET_SEARCH_DATE](state, data) {
    state.dateInfo = data
    
    
  },
  [types.SET_REPAIR_RESOURCE](state, data) {
    state.repairResource = data
  }
}
export default mutations

此处为statistics下的mutations.js配置项

export const dateInfo = state => state.dateInfo
export const repairResource = state => state.repairResource

此处为statistics下的getters.js配置项

const state = {
  dateInfo: {
    curDate: null,
    showDate: ['', '']
  },
  repairResource: []
}
export default state

此处为statistics下的state.js配置项

 computed: {
    ...mapGetters("statistics", ["dateInfo"])
  },

   ...mapMutations("statistics", {
      setSearchDate: "SET_SEARCH_DATE",
      setRepairResource: "SET_REPAIR_RESOURCE"
    })

   //调用 vux 里的 mapMutations  里的   setSearchDate  方法,传入对象  赋值给state里的dateInfo
      if (
        this.halfyearValue &&
        this.halfyearValue != null &&
        this.halfyearValue.length > 0
      ) {
        this.setSearchDate({
          type,
          showDate,
          curDate:
            moment(this.halfyearValue[0])
              .date(1)
              .format("X") * 1000,
          timeRange: [
            moment(this.halfyearValue[0])
              .startOf("months")
              .valueOf(),
            moment(this.halfyearValue[1])
              .endOf("months")
              .valueOf()
          ]
        });
      }

引用vuex数据页面的 引用处