vue store getters mapGetters 具体用法

1、首先在src下面建一个store文件夹

具体的结构是：modules（文件夹） getter.js index.js

2、在main.js 里引入 

import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

3、index.js 里面的代码

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {

  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
})

export default store

4、modules 里是各个模块需要用到的数据 各种js文件

const state = {
  followfileList: [], // 档案分组列表
  // followfileListLocal: [], // 本地分组列表
  countryList: [], // 国家列表
  cancelSinglebaseId: null, // 档案被取消关注的人员id
  homeRequestFinishNum: 0,
  specialList: [],//全部专题列表
  wordList: [],//热搜词列表
  rootSpecialList: [],//全部要闻专题
  organizationListAll: [],//智能档案-组织根名称
}

const mutations = {
  SAVE_FOLLOW_FILE_LIST: (state, list) => {
    state.followfileList = list
  },
  SAVE_COUNTRY_LIST: (state, list) => {
    state.countryList = list
  },
  SAVE_SPECIAL_LIST: (state, list) => {
    state.specialList = list
  },
  SAVE_WORD_LIST: (state, list) => {
    state.wordList = list
  },
  SAVE_ROOTSPECIAL_LIST: (state, list) => {
    state.rootSpecialList = list
  },
  UPDATE_CANCEL_SINGLE_BASEID: (state, baseId) => {
    state.cancelSinglebaseId = baseId
  },

  UPDATE_HOME_REQUEST_FINISH_NUM: (state) => {
    state.homeRequestFinishNum++
  },
  SAVE_ORGANIZATION_LIST_ALL: (state, list) => {
    state.organizationListAll = list
  },
}
export default {
  namespaced: true,
  state,
  mutations
}

5、放需要获取的字段

const getters = {
  token: state => state.user.token,
  name: state => state.user.name,
  user_id: state => state.user.user_id,
  dept_id: state => state.user.dept_id,
  role_type: state => state.user.role_type,
  menus: state => state.user.menus,
  categories: state => state.user.categories,
  routes: state => state.permission.routes,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  city_lat: state => state.user.city_lat,
  city_lon: state => state.user.city_lon,
  followfileList: state => state.sysData.followfileList,
  organizationListAll: state => state.sysData.organizationListAll,
  tilList:state=>state.reports.tilParams,
  categoryed:state => state.reports.category,
  categoryIds:state => state.reports.categoryIds
}

export default getters

// 报告订阅
const state = {
  tilParams: {},
  category: {},
  categoryIds:[]
}

const mutations = {
  SAVE_TIL_PARAMS: (state,data) => {
    state.tilParams = data
  },
  CATE_GORY: (state, data) => {
    state.category = data
  },
  SAVE_ALL_CATES:(state,data) => {
    state.categoryIds = data
  }
}
export default {
  namespaced: true,
  state,
  mutations
}

 

6、在需要使用的页面

首先要使用肯定要存储          reports 是js的文件名

this.$store.commit("reports/SAVE_TIL_PARAMS", til);

7、也是在需要使用的页面

import { mapGetters } from "vuex";

computed:{
 ...mapGetters(["tilList", "categoryed"]),
}

要使用这个数据的话

const tie = JSON.parse(this.tilList)