关于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里的dateInfoif (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数据页面的 引用处