vuex的一些笔记

vuex 官网写得很好了。只是没有例子的话，只靠看文档是理解不够的。
这里我的写法是采用moduls模块化， 分别创建4个文件（推荐）。当然你也可以创建一个文件然后包含这4个模块（小项目）。

  state.js,
  getters.js,
  actions.js,
  mutations.js

index(state)

创建一个简单的 index .js文件.
这个index 文件就相当于，集合（同意对外暴露）。

import getters from './getters';
import actions from './actions';
import mutations from './mutations';
// state 是状态，可以存储 属性、数组、对象等
const state = {
   bookId: '',
   custId: '',
   custName: '',
   custType: '',
   terminalName: '',
   terminalId: '',
   newTerminalArr: [],
   dateIsReset: true,
   isCust: false,
   right: {},//选择事业部后的权限
};
// 暴露
export default {
   state,
   getters,
   actions,
   mutations
}

getters

right(state) {
    return state.right;
}

export default {
    getters,
}

mutation

创建一个简单的 mutation.js文件

const mutations = {
   // 选择事业部ID
   'SET_BOOK_ID': (state, val) => {
       state.bookId = val;
   },
   // 选择的客户名称
   'CUST_NAME': (state, val) => {
       state.custName = val;
   },
    // 判断是选择主体还是选择门店
   'IS_CUST': (state, val) => {
       state.isCust = val;
   },
   // 接收类型
   'RECORD_TYPE':(state,data)=>{
       state.recordType = data
   },
   'STAFF_RIGHT': (state, val) => {
       state.right = val;
   }
}
export default mutations;

action

创建一个简单的 action .js文件

import {api} from './api';
import ajax from '../../ajax';

const actions = {
   // 根据事业部+客户类型查询查询
   getPromotionCust({commit}, data) {
       return ajax.post(api.getPromotionCust, data)
   },
   // 根据数据字典表配置每个事业部的品牌
   getPromotionBrand({commit}, data) {
       return ajax.post(api.getPromotionBrand, data)
   },
   // 促销活动详情
   getPromotionActivityDetail({commit}, data) {
       return ajax.post(api.getPromotionActivityDetail, data)
   },
   // 根据客户查询客户下门店
   getPromotionTerminal({commit}, data) {
       return ajax.post(api.getPromotionTerminal, data)
   },
}
export default actions;

api

创建一个简单的 api .js文件

const api = {
    getPromotionCust:           'getPromotionCust',           // 根据事业部+客户类型查询查询
    getPromotionBrand:          'getPromotionBrand',          // 根据数据字典表配置每个事业部的品牌
    getPromotionTerminal:       'getPromotionTerminal',       // 根据客户查询客户下门店
    addPromotionActivity:       'addPromotionActivity',       // 促销活动上报-需支持新增/修改
    delPromotionActivity:       'delPromotionActivity',       // 促销活动删除
    getPromotionTaskFinishInfo: 'getPromotionTaskFinishInfo', // 促销任务完成进度
};
module.exports = {
    api
};

实例化（怎么使用）

创建一个vue文件

// 引入
import {  mapState, mapGetters, mapActions, mapMutations } from 'vuex'

computed:{
	// 赋值操作（更改属性、数组、对象、字典）
    ...mapState({
         // 这个是在 com 模块的
         userInfo: state => state.com.userInfo,
         // 这个是在 activity 模块的
         bookId:  state => state.activity.bookId,
         custType: state => state.activity.custType,
         selectcCustId: state => state.activity.custId,
         newTerminalArrSel: state => state.activity.newTerminalArr,
      }) ,
        
     ...mapGetters([
         'right'
     ]),  
                
},
      // 使用 直接 this.xxx
      1、例如：赋值操作
       this.bookId = this.bookId;
       this.terminaArr = this.newTerminalArrSel;
      2、mutation 赋值操作，同步更改 state 的属性状态。
        this.$store.commit('NEW_TERMINAL_ARR', this.terminaArr);
        this.$store.commit('DATE_IS_RESET', false);
        this.$store.commit('IS_CUST', false);
      3、getter的操作 （直接this.xxx）
      	this.right.staffType == '1'
	

接着上面的 …mapActions 是放在actions里的

 methods: {
    ...mapActions(["getPromotionTerminal",'getBaseData']),
    ...mapMutations({
       recordType:'RECORD_TYPE',
     }),
  },
使用：
例如：
  1、actions 异步操作
	// 默认情况下是这样的：  this.$store.dispatch()
	  var params = {}
	  this.$store.dispatch('getPromotionTerminal', params).then(data => {}), (e) => {                  
         this.Toast(e)
      });
// 使用了 ...mapActions 后， 是直接 this.方法
例如：

let params = {
       organizationId: window.bookId,
       month: this.requestDate
 };
  this.getPromotionTerminal(params).then(res =>{
       this.pectionTask = res;
       this.drawPies(this.intNumber(res.customerInspectionDoneRate), this.pieCustomerDone);                   
       this.drawPies(0, this.pieDiary);
   });
   
   this.getBaseData({bookId:window.bookId}).then(data => {
          // 接受返回的值
     })
------------------------------- 华丽丽的分割线 ------------------------
...mapMutations ({}) 的使用就 更加简单了，直接调用：

直接调用赋值：
this.recordType(type);

简书：光明程辉