????????完成頁面的顯示，但是還需要進行修改，這里涉及到修改中的信息同步顯示。也會涉及到數據的讀取，修改和同步。
????????本文介紹了如何使用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);
??????????? }
)
