創建store文件夾：store/index.js

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import address from './modules/address.js'Vue.use(Vuex)const store = new Vuex.Store({modules: {address}
})export default store

創建modules文件夾：modules/address.js

import api from "../../api/api";export default {namespaced: true, // 啟用命名空間state: {addressInfo: {}},mutations: {// 用戶收貨地址SET_DELIVERY_DAARESS(state, detail) {console.log('SET_DELIVERY_DAARESS:', state, detail)state.addressInfo = detail}},actions: {// 獲取收貨地址詳情async fetchGetDeliveryInfo({ commit }, id) {try {const { data: {data} } = await api.getDeliveryInfo(id)commit('SET_DELIVERY_DAARESS', data)return data} catch (err) {console.error(err)throw err}},// 添加收貨地址async submitAddDeliveryInfo({ commit }, formData) {try {const { data: {data} } = await api.addDeliveryInfo(formData)return data} catch (err) {console.error(err)throw err}},// 添加收貨地址async modifyUpdateDeliveryInfo({ commit }, formData) {try {const { data: {data} } = await api.updateDeliveryInfo(formData)return data} catch (err) {console.error(err)throw err}},},getters: {getDeliveryAddress: (state) => state.addressInfo}
}

main.js 全局掛載

import store from './store'const app = new Vue({store,...App
})

對應頁面調用

import { mapState, mapActions } from 'vuex'computed: {// 從名為'address'的 Vuex 模塊中映射 addressInfo 狀態到組件的計算屬性// 將返回的對象混入到 computed 對象中...mapState('address', ['addressInfo'])
},
methods: {// 從'address'模塊映射三個 action 方法到組件方法中...mapActions('address', ['fetchGetDeliveryInfo','submitAddDeliveryInfo','modifyUpdateDeliveryInfo']),async showAddress() {try {await this.fetchGetDeliveryInfo({id: this.id})// 如果 addressInfo 有收貨地址的數據就填入頁面if(this.addressInfo) {this.form = this.addressInfo}} catch (err) {tool.alert(err)}},// 保存地址async saveAddress() {try {// 如果有 id 就更新收貨地址，沒有就調用新增地址 apiconst api_ = this.id == '' ? this.submitAddDeliveryInfo(this.form) :this.modifyUpdateDeliveryInfo(this.form)const res = await api_} catch (err) {tool.alert(err)}},
}