软文素材网抖音矩阵排名软件seo
完成页面的显示，但是还需要进行修改，这里涉及到修改中的信息同步显示。也会涉及到数据的读取，修改和同步。
本文介绍了如何使用Vuex管理品牌数据，实现数据的同步显示和修改。主要内容包括：1.将获取品牌数据的异步操作封装到Vuex的actions中，减少重复代码；2.在组件中通过mapActions和mapMutations引入Vuex方法；3.在品牌信息修改或新增后，通过SET_BRAND方法立即更新状态，确保页面数据同步。这种方法避免了在每个页面重复请求数据，提高了代码复用性，同时实现了修改后的实时更新。
1、先看看原来的样子（屏蔽的代码）
created() {
this.getBrandData(); //通过mapActions 过来的接口 获取数据，代替下面的语句
/*因为用了vuex的方式获取数据，就不用再重复写了 ，也避免下一个页面需要获取还要重新再写一次 在brand.js中*/
/*
brandCloudObj.get().then(res=>{
this.SET_BRAND(res.data[0])
})
*/
},
2、将1的异步，抽离出来，封装到vuex 的 action中，便于引用
2.1 引入云对象
const brandCloudObj = uniCloud.importObject("green-mall-brand")
//导入云对象，和在页面逻辑中是一样的
2.2 定义一个异步操作
就是把我们的 云对象获取数据的操作，封装到vuex action。
const brandCloudObj = uniCloud.importObject("green-mall-brand")
//导入云对象，和在页面逻辑中是一样的//定义brand ，包含state状态 ，mutations同步操作，actions异步操作
// https://blog.csdn.net/weixin_43529465/article/details/129806460 分析
const brand = {state: {// brandData: {},brandData: {// name:null //要屏蔽掉，不然页面 show-headbar 上也会判断name有这一个键（key） noBrandData: false //默认是有值 有品牌信息}},mutations: {// 作用：操作Vuex中的state属性数据。// mutations属性与getters 属性和 state属性平级，可以修改state中的数据。SET_BRAND(state, value) {state.brandData = value}},actions: {// 作用：修改state数据，异步修改。// 区别：actions是异步修改state中数据，mutations是同步修改state中数据。// 原理：actions中的方法并不能直接修操作state中的数据，需要触发mutations中的方法，最终还需要通过mutations中的方法修改数据//其实下面的请求，也可以放到页面上做数据请求，但是为了后期使用，总不可能每一个页面我们都做一个请求吧。这也就相当于一数据请求的封装，后期都用这一个就好//在shop-headbar 中，created，可以完成的请求放到了这里async getBrandData(context) { //context 是上下文标识，通过他 可以获取到state 以及 mutations 中的方法和变量let arr = Object.keys(context.state.brandData) //Object.keys 获取对象的key成为一个数组if (arr.length) return; //有数据，减少网络请求和浪费let res = await brandCloudObj.get();if (!res.data.length) { //判断 数据库中有没有品牌信息context.commit("SET_BRAND", { //通过 commit 执行，方法SET_BRANDnoBrandData: true // 判断是没有值，就返回空})return;};context.commit("SET_BRAND", res.data[0]) //数据库有值，就返回数据库获取到的信息}}
}
export default brand
3、改写shop中shop-headbar组件中的 获取数据操作
3.1 导入 vuex 中 maoaction 的方法，屏蔽云对象的导入
import {
mapState,
mapGetters,
mapMutations,
mapActions
} from "vuex" //通过这里 才能使用mapGetters 中的 brandData
import brand from "../../store/modules/brand";
//引入mapMutations 便于引入state中的方法 SET_BRAND
// const brandCloudObj = uniCloud.importObject("green-mall-brand") 因为用了vuex的方式获取数据，就不用导入了 在brand.js中
3.2 在组件/页面的方法中，导入vuex action中的方法action中的 getdata
methods: {
...mapMutations(["SET_BRAND"]), //同步处理 从brandData放到数据库 修改来用
...mapActions(["getBrandData"]), //异步处理 从数据库读取赋值给brandData 显示来用 修改时，就是先在修改界面显示，然后修改，然后在显示
}
3.3 在created中使用该方法
// 相当于页面中的 onload 在组件中使用 created
created() {
this.getBrandData(); //通过mapActions 过来的接口 获取数据，代替下面的语句
/*因为用了vuex的方式获取数据，就不用再重复写了 ，也避免下一个页面需要获取还要重新再写一次 在brand.js中*/
/*
brandCloudObj.get().then(res=>{
this.SET_BRAND(res.data[0])
})
*/
},
4、在brand.vue中使用 vuex 数据
在这个页面中，处理添加和修改两个功能，
如果是添加，那么在添加以前，在我们shop头部页面（shop-headbar组件）显示的就没有数据，以前的代码添加后，是不会立即显示；
如果是修改，那么在修改以前，在我们shop头部页面（shop-headbar组件）显示的就时以前的数据，以前的代码修改后，是不会立即更新；
4.1 要使用vuex的方法，让修改和添加都能立即更新到我们的shop页面上
导入 vuex中的方法
import {
mapMutations
} from "vuex"
4.2 在处理修改和更新的逻辑的方法上，添加一个处理，修改页面中 shop-headbar的状态显示数据
//新增或者修改品牌啊信息 异步同步化
async addAndUpdate() {
let title;
if (this.brandFormData._id) {
let res = await brandCloudObj.update(this.brandFormData)
title = "修改成功"
} else {
//新增
await brandCloudObj.add(this.brandFormData)
title = "新增成功"
}
uni.showToast({
title,
mask: true
})
setTimeout(() => {
uni.navigateBack();
}, 1500)
this.SET_BRAND(this.brandFormData);
}