1 概述
上节说了vuex 的基本使用方法，分析了基本的使用方法。
在使用中，常见使用，我们要针对状态，购物车，不同类事务的管理，如果按照上节课的通用方法，那么使用和维护是会很大的难度的。
所以这里就必须要进行处理，借助 modules 进行定义不同类事务的处理手段。便于后期维护和使用。
2 步骤
1、在store 中 建 一个文件夹 modules
2、在 modules 下对不同类事务建立JS文件
3、不同类的事务的JS 中创建对应的 state mutations
state 就是该类事务需要的数据，数据的处理方法 mutations
4、定义：getters.js 将上面的3 中定义的 state mutations 进行逻辑运算，并把计算好的结果---用变量的形式暴露---给外面的页面调用；
5、在store中 index 中 创建 getters和modules。
state在modules中的js文件中已经 分类创建了
6、在外面需要的页面和组件进行调用就ok
3 详细
第一步骤：在store 中 建 一个文件夹 modules
第二步骤： 在 modules 下对不同类事务建立JS文件
1 car.JS 包含state mutations 还要导出cars
const cars = {//这里就没有modules了 因为这就是modulesstate: {//定义变量carsList: [],},mutations: {//定义动作 state 是上面定义的变量 num 是传进来的值setCarsList(state, itemNum) {if(itemNum==0) return state.carsList=[];let {item,num} = itemNum;let caritem = {goodsid: item.id || item.goodsid, //注意数据来源 第一个是点击shop。vue的数据，第二个是点击购物车的数据name: item.name,price: item.price,before_price: item.before_price,thumb: item.thumb,numvalue: num}// console.log(caritem);if (caritem.numvalue <= 0) {state.carsList = state.carsList.filter(item1 => item1.goodsid != caritem.goodsid);} else {let index = state.carsList.findIndex(item1 => item1.goodsid == caritem.goodsid);if (index > -1) {state.carsList[index].numvalue = caritem.numvalue} else {state.carsList.unshift(caritem)}}}}}
export default cars;2、system.js 包含自定义的变量，以及state mutations 还要导出 system
//获取设备系统基本信息
const systemInfo = uni.getSystemInfoSync()
//获取状态栏高度 这是一个函数方法
const getStatusBarHeight = () => systemInfo.statusBarHeight || 20//获取标题栏
const getTitleBarHeight = () => {// #ifdef MP-WEIXINlet menuBtnInfo = uni.getMenuButtonBoundingClientRect();let menuBtnInfoHeight = menuBtnInfo.height + (menuBtnInfo.top - getStatusBarHeight()) * 2;return menuBtnInfoHeight;// #endifreturn 40;
}const system = {//这里就没有modules了 因为这就是modulesstate: {//定义变量StatusBarHeight: getStatusBarHeight(), //调用上面的函数方法TitleBarHeight: getTitleBarHeight(), //调用上面的函数方法foldState: true, //折叠我们的店铺名字},mutations: {//定义动作 state 是上面定义的变量 num 是传进来的值setfoldState(state, value) {state.foldState = value}},}
export default system第三步骤：getters.js 将上面的3 中定义的 state mutations 进行逻辑运算，并把计算好的结果---用变量的形式暴露---给外面的页面调用；
//通过这里将所有store的js文件的state 暴露后转发出去
const getters = {StatusBarHeight: state => state.system.StatusBarHeight,TitleBarHeight: state => state.system.TitleBarHeight,foldState: state => state.system.foldState, //是否折叠bodyBarHeight: state => {if (state.system.foldState) return state.system.TitleBarHeight;return 100;},totalHeight: state => {if (state.system.foldState) return state.system.StatusBarHeight + state.system.TitleBarHeight + 10;return state.system.StatusBarHeight + state.system.TitleBarHeight + 100 + 10;},carsList: state => state.cars.carsList,//获取数组的总价 [1,2,3] return prev+=nexttotalPrice: state => {return state.cars.carsList.reduce((prev, next) => {return prev += next.price * next.numvalue}, 0)//0 是初始值 prev，next对象的price值，一直加到最后},totalNumValue: state => {return state.cars.carsList.reduce((prev, next) => {return prev += next.numvalue}, 0)}
}
export default getters;/*开始需要在应用中这样写
computed:{...mapState({vuexHeight:state=>state.system.vuexHeight //这样就能获取到该值 但是太麻烦 所以我们要改用 getters来获取 在store中准备getters.JS文件})},现在直接在文中 写 vuexHeight:state=>state.system.vuexHeight然后导入到index。js ---》再去使用的页面vue 导入getters import {mapState,mapMutations,mapGetters} from "vuex"然后再实例化 到const 中：如下：import Vue from "vue"import Vuex from "vuex"import system from "@/store/modules/system.js"import getters from "./getters" //导入getter 然后再去使用的页面vue 导入getters import {mapState,mapMutations,mapGetters} from "vuex"Vue.use(Vuex) //再vue安装vuexconst store = new Vuex.Store({getters, //注意这里还要导入modules:{system}})export default store */第四步骤：在store中的 index 中 创建 getters和modules。
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"])},*/第五步骤：在外面需要的页面和组件进行调用就ok
在shop vue中调用：
在 shopbar中：
