vuex在项目中的使用

一、Vuex模块开发

由于项目体积比较大，你向服务器发请求的接口过多，服务器返回的数据也会很多，如果还用以前的方式存储数据，导致vuex中的state数据格式比较复杂。采用vuex模块式管理数据。 Vuex核心概念:state、actions、mutations、getters、modules

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
​
//引入小仓库
import home from './home'
import search from './search'
//向外暴露Store类的一个实例
export default new Vuex.Store({
    modules: {
        home,
        search,
    }
})

使用示例：

//封装好的一个moudle-----home
import { reqCategoryList } from '../../api/index' 
//从API管理模块中引入需要发请求获取信息的对应方法
const actions = {
    //reqCategoryList方法请求成功返回一个Promise函数，用async...await...异步执行来返回成功Promise的数据
    async categoryList({ commit }) {
        let result = await reqCategoryList();
        // console.log(result);
        if (result.code === 200) {
            commit('CATEGORYLIST', result.data);
            return 'ok';
        } else {
            return Promise.reject(new Error('Fail'));
        }
    }
};
const mutations = {
    CATEGORYLIST(state, categoryList) {
        state.categoryList = categoryList;
    }
};
const state = {
    //state中的默认值别瞎写【根据接口返回的值初始化】
    categoryList: [],
};
const getters = {};
​
export default {
    actions,
    mutations,
    state,
    getters
}
​
//某个组件如果需要数据，则如下通过dispatch / commit 方法发出申请
mounted(){
    //通知Vuex发送请求，获取数据，存储在仓库中
    this.$store.dispatch('categoryList');
  }
​
//然后在通过计算属性 computed 来获取数据
computed:{
    // 这是利用计算属性的简写获得
    // categoryList(){
    //   // console.log(this.$store.state)
    //   return this.$store.state.home.categoryList;
    // }
​
    //利用...mapState方式获取
    //对象写法：右侧需要的是一个函数，当使用这个计算属性的时候，右侧函数会调用
    ...mapState({
      categoryList:state =>{
        return state.home.categoryList;
      }
    })
    //此时就不能使用数组写法，因为state已经模块化了，不知道对应哪个属性
    如：
    ...mapState(['categoryList']) //就会不知道是home模块下的还是search模块下的
  },

​

二、getters用法

Vuex 允许我们在store中定义“getter”（可以认为是store的计算属性）。就像计算属性一样， getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 对于getters的理解主要作用是对state属性进行计算

//路径导航简化的数据(因为state中goodsInfo对象中的数据过于复杂)
const getters = {
    categoryView(state) {
        return state.goodsInfo.categoryView || {};
    },
    //简化产品信息的数据
    skuInfo(state) {
        return state.goodsInfo.skuInfo || {};
    },
    //产品售卖属性的简化
    spuSaleAttrList(state) {
        return state.goodsInfo.spuSaleAttrList || [];
    }
}
注意：使用mapGetters获取属性数据的时候是可以使用数组写法的，因为getters没有模块化

特别注意：在项目中有时候你从state / getters中获取了数据，开始在DOM中动态使用时，会报该对象的属性undefined的错误，所以我们在return的时候多加一个 || {} 或者 || [] 就OK了（比如：state.goodsInfo初始状态为空对象，空对象的categoryView属性值undefined ，再当用categoryView的属性时，就会是undefined.属性，此时就会报错。所以到当计算出categoryView属性值至少为一个空对象或空数组时，就不会报错了）