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

uniapp-商城-65-shop（1-品牌信息显示，将数据库信息同步到vuex的state）

news 2025/5/23 5:28:32

通过后台将我们的品牌加到了数据库里面，同样也需要将该信息显示到界面上来。无非就界面读取后台数据库的信息，但是需要做到实时显示。

我们这里通过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 brand

1.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 中需要使用的值导过来
        },