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"]   可以删除掉