Vue 状态管理之vuex && {mapState,mapGetters}

  1 # 一、理解vuex
  2     1.概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读写），也是一种组件间通信的方式，且适用于任意组件间通信。
  3     2.Github地址：https://github.com/vuejs/vuex
  4 # 二、什么时候使用Vuex
  5     1.多个组件依赖同一状态
  6     2.来自不同组件的行为需要变更同一状态
  7 # 三、安装： npm i vuex@3
  8     vuex@3 对应的  vue2
  9     vuex@4 对应的  vue3
 10 # 四、搭建vuex环境
 11     // 该文件用于创建Vuex中最为核心的store，路劲(一般都放这里)：src/store/index.js
 12     // 引入Vuex
 13     import Vue from 'vue'
 14     import Vuex from 'vuex'
 15 
 16     // 引入插件
 17     Vue.use(Vuex);
 18 
 19     // 准备actions，用于响应组件中的动作
 20     const actions = {
 21         jia(miniStore, value){
 22         miniStore.commit('JIA', value)
 23         },
 24         jian(miniStore, value){
 25         miniStore.commit('JIAN', value)
 26         },
 27         jiaOdd(miniStore, value){
 28         if (miniStore.state.sum % 2){
 29             miniStore.commit('JIA', value)
 30         }
 31         },
 32         jiaWait(miniStore, value){
 33         setTimeout(()=>{
 34             miniStore.commit('JIA', value)
 35         }, 500);
 36         }
 37     }
 38     // 准备mutation，用于操作数据（state）
 39     const mutations = {
 40         JIA(context, value) {
 41         context.sum += value;
 42         },
 43         JIAN(context, value) {
 44         context.sum -= value;
 45         },
 46     }
 47     // 准备state，用于存储数据
 48     const state = {
 49         sum: 0,
 50     }
 51 
 52 
 53     // 创建并暴露store
 54     export default new Vuex.Store({
 55         actions,
 56         mutations,
 57         state
 58     });
 59     # 组件部分代码
 60     
 75     
118     
123     
124     
125     # 1.组件中渡漆vuex中的数据：$store.state.sum
126     # 2.组件中修改vuex中的数据： $store.dispatch('actions中的方法名', data) 或  $store.commit('mutations中的方法名', data)
127     #     备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，不写dispatch，直接写commit