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