vuex使用和规范

关于vuex使用和规范
vuex示例

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

Vue.use(Vuex);
let store = new Vuex.Store({
  // 1. state
  state:{
    city:"城市名",
    reserveInfo:{}  //预约参数列表
  },

  // 2. getters
  getters:{
    // 参数列表state指的是state数据
    getCityFn(state){
      return state.city;
    },
    getReserve(state){
      return state.reserveInfo;
    }
  },
  // 3. actions
  // 通常跟api接口打交道
  actions:{
    // 设置城市信息
    // 参数列表：{commit, state}
    // state指的是state数据
    // commit调用mutations的方法
    // name就是调用此方法时要传的参数
    setCityName({commit,state}, name){
      // 跟后台打交道
      // 调用mutaions里面的方法
      commit("setCity", name);
    },
    setReserveInfo({commit,state},obj){
      commit('setReserve',obj);
    }
  },
  // 4. mutations
  mutations:{
    // state指的是state的数据
    // name传递过来的数据
    setCity(state, name){
      state.city = name;//将传参设置给state的city
    },
    setReserve(state, obj){
      // state.reserveInfo = Object.assign(state.reserveInfo,obj);
      state.reserveInfo = {
        ...state.reserveInfo,
        ...obj
      }
    }
  }
});

export default store;

在vue页面中调用和使用分两种情况，第一种直接使用，使用computed获取，示例

computed:{
      reserveInfo(){
        return this.$store.getters.getReserve;
      }
    },

vue页面调用

<div class="info">
        <div class="item">
          <span>预约业务</span>
          <span>{{reserveInfo.typeName}}</span>
        </div>
        <div class="item">
          <span>预约大厅</span>
          <span>{{reserveInfo.centerName}}</span>
        </div>
        <div class="item">
          <span>详细地址</span>
          <span>{{reserveInfo.address}}</span>
        </div>
      </div>

第二种，修改vuex仓库参数的值

this.$store.dispatch('setReserveInfo',this.typeList);