Vuex

1.mapState方法:用于映射state中的计算属性

import {mapState} from 'vuex'

computed:{
    //借助mapState生成属性:sum , school ,对象写法
    ...mapState({sum:'sum',school:'school'}),

    //借助mapState生成属性:sum , school ,数组写法
    ...mapState(['sum','school'])
　　
　　　...mapState({
　　　　　　list:(state)=>{

　　　　　　　　return state.home.list
　　　　　　})

  　　}

 2.mapGetters方法:用于映射getters中的计算属性

import {mapGetters} from 'vuex'

computed:{

//借助mapGetters生成属性:bigSum ,对象写法
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成属性:bigSum 数组写法
    ...mapGetters(['bigSum'])

 }

 
//声明的时候这么声明

import { reqSearchList } from "@/api";

const state = {

  listInfo: {},

};

const mutations = {

  LIST(state, listInfo) {

    state.listInfo = listInfo;

  },

};

const actions = {

  // 通过API里面的接口函数调用，向服务器发送请求，获取服务器的数据

  async getSearchList({ commit }, data = {}) {

    let result = await reqSearchList(data);

    if (result.code == 200) {

      commit("LIST", result.data);

    }

  },

};

const getters = {

  attrsList(state) {

    return state.listInfo.attrsList;

  },

  trademarkList(state) {

    return state.listInfo.trademarkList;

  },

  goodsList(state) {

    return state.listInfo.goodsList;

  },

};

export default {

  state,

  mutations,

  actions,

  getters,

};

 3.模块式开发

 

store文件新建其他模块的文件夹

新建home文件夹 index.js文件

const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {
    state, mutations, actions, getters
}


store文件夹中index.js

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    home //引入模块
  }
})