vuex的模組化使用
阿新 • • 發佈:2021-06-10
第一步:在store/index.js中
import Vue from 'vue' import Vuex from 'vuex' import cart from './modules/cart'; //在store的資料夾下新建一個modules/cart.js模組 Vue.use(Vuex) export default new Vuex.Store({ modules: { cart, //引用cart模組 } })第二步:在store的資料夾下新建一個modules/cart.js模組
export default { namespaced: true, //便於維護需要設定namespaced為true,使其成為帶有名稱空間的模組第三步:在需要獲取的頁面進行操作state:{ cartList: [], count: 0, }, getters:{ getCount(state){ //設定狀態 return state.count } }, mutations:{ }, actions:{ } }
<template> <div> <h4>page頁面獲取cart模組資料:{{getCount}}</h4> </div> </template> import {mapGetters} from 'vuex'; //引進mapGetters export default{ computed:{ ...mapGetters('cart',['getCount']) //第一個引數是哪個模組,第二個引數是要獲取的資料 }, }