网站备案去哪注销网站开发网站开发公司哪家好
通过后台将我们的品牌加到了数据库里面，同样也需要将该信息显示到界面上来。无非就界面读取后台数据库的信息，但是需要做到实时显示。
我们这里通过vuex 的状态显示，将后台的数据读取到前台显示。
本文介绍了如何通过Vuex实现后台品牌数据实时显示到前端界面。首先，在Vuex的store文件夹中创建brand.js文件，定义state、mutations和actions，用于管理品牌数据。通过actions异步获取后台数据，并通过mutations同步更新state。接着，在getters.js中暴露brandData接口，便于页面使用。最后，在shop-headbar组件中，通过mapGetters导入brandData，并替换界面中的固定内容，实现品牌信息的动态显示。整个过程确保了数据的实时更新和界面的动态渲染。
1、vuex的基本文件
前面已经讲过了
store文件夹---->modules文件夹（包含基本的js文件 car，brand，system等js文件）
store文件夹---->getters.js文件 暴露数据接口（接口主要是计算store中的 state）
store文件夹---->index.js文件（导出 vuex的状态结果，便于应用，包含 store中的js文件，包含getter.js）
1.1、创建brand的js文件
1.1.1 brand中的代码解析
const brandCloudObj = uniCloud.importObject("green-mall-brand")
//导入云对象，和在页面逻辑中是一样的//定义brand ，包含state状态 ，mutations同步操作，actions异步操作
// https://blog.csdn.net/weixin_43529465/article/details/129806460 分析
const brand = {state: {brandData: {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中的方法修改数据async getBrandData(context) {let res = await brandCloudObj.get();if (!res.data.length) {context.commit("SET_BRAND", {noBrandData: true})return;};context.commit("SET_BRAND", res.data[0])}}
}export default brand1.2、getter的代码文件
作用：类似于过滤器，数据输出之前可以操作数据。
getters 属性和 state属性平级，可以过滤state中的数据。
brandData: state => state.brand.brandData, //暴露接口，主要是通过这里做一些计算，然后暴露出去，当然这里没有做计算
1.3、index文件
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex) //再vue安装vueximport system from "@/store/modules/system.js"
import cars from "@/store/modules/cars.js"
//上面三个必须写 ，创建getters.js 并导入 但是getters.js 中是暴露 modules 中js 的state 便于页面使用
import getters from "./getters" //导入getter 然后再去使用的页面vue 导入getters import {mapState,mapMutations,mapGetters} from "vuex"
import brand from "@/store/modules/brand.js"const store = new Vuex.Store({getters, //实例化 getters 不然vue页面用不了modules:{system,cars,brand},
})export default store;
1.3.1 使用注意：
// 创建好该文件要再main.js中配置
/*
//start 这样就可以对该store进行全局挂载 所有页面使用
import store from '@/store'
//这样就可以对该store进行全局挂载 所有页面使用
Vue.prototype.$store=store
//end 这样就可以对该store进行全局挂载 所有页面使用
--------------
然后再使用页面导入：
import {mapState,mapMutations,mapGetters} from "vuex"//导入vuex
-----------------再进行计算*//*computed:{//这里两个方法都可以获取到数据，前面太麻烦就封装了一个getters//后一个通过getters 获取的// 第一种 没有使用 getters ...mapState({vuexHeight:state=>state.system.vuexHeight //这样就能获取到该值 但是太麻烦 所以我们要改用 getters来获取 在store中准备getters.JS文件}),//第二种 有使用 getters ...mapGetters(["vuexHeight"])},*/2、shop中页面处理
shop页面中，使用的是shop-headbar组件来处理头部的。
2.1 shop-headbar组件
这个组件在前面的页面中已经说过了
2.1.1 第一步：导入mapState,mapGetters,mapMutations,mapActions
import {mapState,mapGetters,mapMutations,mapActions} from "vuex" //通过这里 才能使用mapGetters 中的 brandData
2.1.2 第二步：导入 getters中的branddata
computed: { ...mapGetters(["StatusBarHeight","TitleBarHeight","bodyBarHeight","totalHeight","foldState","brandData"])
//将getters 中 需要使用的值导过来
},
2.1.3 第三步：使用数据库的名称替换以前固定写的名字
2.1.4 第四步：修改头像
2.1.5 第五步：修改描述
2.1.6 第六步：修改头部背景图片
