当前位置：首页 > news >正文

【uniapp】vue2 使用 Vuex 状态管理

news 来源：原创 2025/5/21 7:47:26

创建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)}},
}