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'

/**
 * 常用基礎(chǔ)數(shù)據(jù)讀取,注意有以下限制:
 * 1.必須只能是讀取!!!
 * 2.必須只能是在基礎(chǔ)模塊的數(shù)據(jù)!!!
 * 3.目前僅是通過(guò)數(shù)據(jù)的有無(wú)來(lái)判斷是否作為緩存,后續(xù)可能會(huì)通過(guò)更加合理和復(fù)雜的邏輯來(lái)判斷.
 * @author YangYishe
 */
export default {
 state: {
  // 客戶集合
  arrCustomer: [],
  // 供應(yīng)商集合
  arrSupplier: [],
  
  nowTimes: 0
 },
 mutations: {
  setNowTimes (state, times) {
   // 測(cè)試vuex state的方法
   console.log('set now times')
   state.nowTimes = new Date().getTime() + times
  },
  // 重置客戶數(shù)據(jù)
  setCustomerData (state, arrCustomer) {
   state.arrCustomer = arrCustomer
  },
  // 重置供應(yīng)商數(shù)據(jù)
  setSupplierData (state, arrSupplier) {
   state.arrSupplier = arrSupplier
  },
  
 },
 getters: {

 },
 actions: {
  // 測(cè)試改變方法
  handleChangeTimes ({ state, commit }, { times }) {
   commit('setNowTimes', times)
  },
  // 讀取客戶數(shù)據(jù)(支持mapState和return兩種用法)
  loadCustomer ({ state, commit }) {
   // 讀取客戶數(shù)據(jù)(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
   }
  },
  // 讀取供應(yīng)商數(shù)據(jù)(支持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都是首字母大寫(xiě) -->
  <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:{
    //這里因?yàn)槭遣捎胿uex.store的分支,不確定采用字符串?dāng)?shù)組的方式是否可以
    ...mapState({
      arrCustomer:state=>state.basedata.arrCustomer
    })
    
  },
  created(){
    //這里調(diào)用的就是mapActions的方法,如果原方法有參數(shù),則默認(rèn)從第二個(gè)參數(shù)開(kāi)始,不需考慮{state}
    this.loadCustomer();
  },
  methods:{
    //這里采用的是字符串?dāng)?shù)組的方式
    ...mapActions([
     'loadCustomer',
    ]),
  }
  
}

</script>