store使用说明

/*********************************** store index**************************************/

/**
 * store入口文件，组装模块并导出 store 的地方
 * 取值
 *    store.getters.collapseMenu
 * 异步存储
 *   store.dispatch('navTree/setSelectDeviceId', data.id)
 * 同步存储
 *   store.commit('navTree/setSelectDeviceId', data.id)
 */

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

import getters from './getters'

import user from './modules/user'
import navTree from './modules/navTree'

Vue.use(vuex)

const store = new vuex.Store({
  // 非生产环境开启严格模式
  strict: process.env.NODE_ENV !== 'production',
  getters,
  modules: {
    user: user,
    navTree: navTree
  }
})

export default store

/*********************************** store getters**************************************/

/**
 * 根级别的getter
 */
const getters = {
  // 是否折叠菜单
  collapseMenu: state => state.navTree.collapseMenu,
  // 选中设备节点
  selDeviceId: state => state.navTree.selDeviceId
}

export default getters

/*********************************** store mutationTypes**************************************/

const COLLAPSE_MENU = 'setCollapseMenu' // 是否折叠导航菜单 false --不折叠， true --折叠
const SELECT_DEVICE_ID = 'setSelectDeviceId' // 选中设备节点id

export default {
  COLLAPSE_MENU,
  SELECT_DEVICE_ID
}

/*********************************** store navTree**************************************/

/**
 * action:
 1、用于通过提交mutation改变数据
 2、会默认将自身封装为一个Promise
 3、可以包含任意的异步操作

 mutations:
 1、通过提交commit改变数据
 2、只是一个单纯的函数
 3、不要使用异步操作，异步操作会导致变量不能追踪。也就是说，用action中的函数调用mutations中的函数，进行异步操作state中的数据
 */

import mutationTypes from '../mutationTypes'

const state = {
  // 是否折叠导航菜单， false -- 不折叠， true -- 折叠
  collapseMenu: false,
  // 选中的导航树设备id
  selDeviceId: ''
}

// commit：同步操作，写法：this.$store.commit('mutations方法名',值)
const mutations = {
  // 获取是否折叠菜单
  [mutationTypes.COLLAPSE_MENU]: (state, payload) => {
    state.collapseMenu = payload
  },
  // 获取选中导航树设备id
  [mutationTypes.SELECT_DEVICE_ID]: (state, payload) => {
    state.selDeviceId = payload
  }
}

// dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
const actions = {
  setCollapseMenu ({commit, state}, val) {
    commit(mutationTypes.COLLAPSE_MENU, val)
  },
  setSelectDeviceId ({commit, state}, val) {
    commit(mutationTypes.SELECT_DEVICE_ID, val)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}