vuex

一、vuex介绍

1. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

   (注意：修改state中的数据，不能在业务页面直接操作，需在vuex中的actions、mutations、getters中进行)

2. 什么情况下我应该使用 Vuex？

   多个页面共用相同得数据得时候（ Vuex 可能是繁琐冗余 ， 将 store 分割成模块（module））

3.新建文件：（配置vuex：store/index.js）

// 页面路径：store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);//vue的插件机制

import cart from '@/store/modules/cart'

//Vuex.Store 构造器选项
const store = new Vuex.Store({
	state:{
	
	},
    modules:{
        模块名
    }
})
export default store

4.在 main.js 来全局引入

import store from './store';

Vue.prototype.$store = store;

const app = new Vue({
  store,
  ...App,
});

5.在store/modules中，新建模块文件，防止index.js过于臃肿

// 子模块cart路径：store/modules/cart.js
export default {
  namespaced: true,
  state: {},
  mutations: {},
  actions: {},
  getters: {},
};

6.关于 模块.js 和 业务页面 的使用过程

(1)store/modules.js

export default {
    namespaced:true,
    state:{放数据},
    mutations：{
     xxxFn(state) {
         // 相关业务
     }
  },
    actions: {},
    getters: {},
}

(2)业务页面

import {mutations,mapGetters,mapMutations,actions} from "vuex"
export default {
    computed：{
        ...mapState("模块名"，["xxxFn","其他业务函数"])
        ...mapGetters("模块名"，["xxxFn","其他业务函数"])
    },
    methods:{
        // 写成数组方便 后续加入其他业务
        ...mapMutations("模块名"，["xxxFn","其他业务函数"])
        ...actions("模块名"，["xxxFn","其他业务函数"])
    }
}

（3）mutations、actions获取数据在methods中

（4）state、getters获取数据在computed中

7.如何在vuex中，业务函数中怎么获取其他业务函数

  getters: {
    AAAfn(state){
        // 业务内容
       return state.数据...
    },
    BBBFn(state,getters){
       // return getters.AAAfn.业务方法。。。
       return getters.AAAfn.reduce(
        (s, item) => s + item.goods_price * item.nums,0);
    }
  },