Vuex新手的理解与使用详解

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

import user from './module/user'
import app from './module/app'
import basedata from './module/basedata'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  //
 },
 mutations: {
  //
 },
 actions: {
  //
 },
 modules: {
  user,
  app,
  basedata
 }
})

import { getCusData, getSupSelect } from '../../api/public'

/**
 * 常用基础数据读取,注意有以下限制:
 * 1.必须只能是读取!!!
 * 2.必须只能是在基础模块的数据!!!
 * 3.目前仅是通过数据的有无来判断是否作为缓存,后续可能会通过更加合理和复杂的逻辑来判断.
 * @author YangYishe
 */
export default {
 state: {
  // 客户集合
  arrCustomer: [],
  // 供应商集合
  arrSupplier: [],
  
  nowTimes: 0
 },
 mutations: {
  setNowTimes (state, times) {
   // 测试vuex state的方法
   console.log('set now times')
   state.nowTimes = new Date().getTime() + times
  },
  // 重置客户数据
  setCustomerData (state, arrCustomer) {
   state.arrCustomer = arrCustomer
  },
  // 重置供应商数据
  setSupplierData (state, arrSupplier) {
   state.arrSupplier = arrSupplier
  },
  
 },
 getters: {

 },
 actions: {
  // 测试改变方法
  handleChangeTimes ({ state, commit }, { times }) {
   commit('setNowTimes', times)
  },
  // 读取客户数据(支持mapState和return两种用法)
  loadCustomer ({ state, commit }) {
   // 读取客户数据(Promise以支持异步操作)
   if (state.arrCustomer.length === 0) {
    return new Promise((resolve, reject) => {
     getCusData().then(res => {
      commit('setCustomerData', res.data)
      resolve(res.data)
     }).catch(err => reject(err))
    })
   } else {
    return state.arrCustomer
   }
  },
  // 读取供应商数据(支持mapState和return两种用法)
  loadSupplier ({ state, commit }) {
   if (state.arrSupplier.length === 0) {
    return new Promise((resolve, reject) => {
     getSupSelect().then(res => {
      commit('setSupplierData', res.data)
      resolve(res.data)
     }).catch(err => reject(err))
    })
   } else {
    return state.arrSupplier
   }
  },
  
 }
}

<template>
  ...
  <!-- 这里采用的是iview框架,所以Select和Option都是首字母大写 -->
  <Select v-model="mCondition.customerId" clearable filterable>
   <Option v-for="mCustomer in arrCustomer" :key="mCustomer.id" :value="mCustomer.id">{{mCustomer.name}}</Option>
  </Select>
  ...
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default{
  name:'test-temp',
  data(){
    return {
      //
      mCondition:{}
    }
  },
  computed:{
    //这里因为是采用vuex.store的分支,不确定采用字符串数组的方式是否可以
    ...mapState({
      arrCustomer:state=>state.basedata.arrCustomer
    })
    
  },
  created(){
    //这里调用的就是mapActions的方法,如果原方法有参数,则默认从第二个参数开始,不需考虑{state}
    this.loadCustomer();
  },
  methods:{
    //这里采用的是字符串数组的方式
    ...mapActions([
     'loadCustomer',
    ]),
  }
  
}

</script>