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 //引入模块
  }
})

 

posted @ 2022-07-25 09:53  小成-  阅读(24)  评论(0)    收藏  举报