按照我们前面讲的，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安装vuex
import 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"] 可以删除掉
