uniapp-商城-29-vuex 关于系统状态的管理
按照我们前面讲的，vuex，的使用方式：
步骤如下：
1 先创建store 文件夹
2 在 store 中 创建一个 index.js
3、 在 store 中，创建一个modules文件夹
4、在store中，创建一个getters.js
5、在modules文件夹 创建一个system.js文件
6、在index.js中：代码如下
就是导入和创建，并导出
导入vuex 和system，getters
创建store 并导出 store
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"const store = new Vuex.Store({getters, //实例化 getters 不然vue页面用不了modules:{system,cars},
})export default store; // 创建好该文件要再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"])},*/7 当然这里还需要将其导入到main.jS中 ，全局导出使用，main.js 如下方式：
/*
import store from '@/store'
//这样就可以对该store进行全局挂载 使用
Vue.prototype.$store=store
*/
8、在 system.js中的代码和操作
把前面在页面中计算过的过程，放到这里
8.1 获取系统基本信息，获取状态栏（信号、电量、时间等等），获取胶囊按钮的高度，实例化system 包含基本的数据 state ，设置system中的方法（在 mutations）
9、getters中的处理，就是把那些需要计算且 需要暴露给外面页面调用的变量进行处理
9、页面中进行使用
9.1 shop页面使用vuex数据：
这里就使用了getter 中暴露的totalNumValue；以及使用了system.js中的方法（方法不需要getters 暴露） setfoldState
使用vuex：需要 computed 获取常量，methods获取方法
computed: {
...mapGetters(["totalNumValue"])
},
methods: {
...mapMutations(["setfoldState"]),
9.2 shop-headBar 组件中的使用：
mapGetters中 computed 获取常量
computed: {
...mapGetters(["StatusBarHeight","TitleBarHeight","bodyBarHeight","totalHeight","foldState"])
},
mounted 中就不需要再计算["StatusBarHeight","TitleBarHeight","bodyBarHeight","totalHeight","foldState"] 可以删除掉
