### 一、Vuex 概述 #### 1.1 传统的组件之间的共享数据方式 - 父向子传值： v-bind - 子向父传值：v-on - 兄弟组件之间共享数据：EvenBus - $on 接受数据的那个组件 - $emit 发送数据的那个组件 缺点：只能通过父传子 和 子传父的方式传值，若想要两个毫无关系的组件传值则很繁琐（需要找到 他们之间的关系） #### 1.2 Vuex是什么 **vuex** 是实现组件全局状态管理的一种机制，可以方便组件之间的数据共享 ### 二、Vuex初始化 store.js ``` import Vue from 'vue' import vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state:{ }, mutations:{ }, actions:{ } }) ``` main.js ``` import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({ store, render: h=>h(app) }).$mount('#app') ``` ### 三、Vue 的核心概念 - state - mutations - actions - Getter #### 3.1 State 第一种方式： 用与存放公共的数据，类似于 vue 中的 data 属性 this.$store.state.count ``` // 创建 store 数据源， 提供唯一公共数据 // Store.js const store = new Vuex.Store({ state:{ count:0 } }) // 目标组件中 this.$store.state.count ``` 第二种方式 ...mapState(['count']) ``` // 目标组件中 // 1. 从 vuex 中按需导入 mapState 函数 import { mapState } from 'vuex' // 2. 将全局数据，映射为当前组件的计算属性 computed:{ ...mapState(['count']) } ``` #### 3.2 mutations 用于变更 Store 中的数据 第一种方式 this.$store.commit() ``` // Store.js // 定义 Mutation const store = new Vuex.Store({ state:{ count:0 }, mutations:{ add(state){ state.count++ } } }) ``` ``` // 目标组件 // 调用 mutation methods:{ handle1(){ // 触发 mutations 的第一种方式 this.$store.commit('add') } } ``` 可以在触发 mutations 时传递参数： ``` // Store.js // 定义 Mutation const store = new Vuex.Store({ state:{ count:0 }, mutations:{ addN(state,step){ //变更状态 state.count += step } } }) ``` ``` // 目标组件 // 调用mutation methods:{ handle2(){ // 在调用 commit 函数触发 mutations 时携带参数 this.$store.commit('addN',3) } } ``` 第二种方式 ...mapMutations(['add','addN']) ``` // 目标组件 // 1. 从 vuex 中按需导入 mapMutations 函数 import { mapMutations } from 'vuex' .... // 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数 methods:{ ...mapMutations(['add','addN'])， btnHandler1(){ this.add() } btnHandler2(){ this.addN(3) } } ``` #### 3.3 Action 触发 actions 异步任务时携带参数： 第一种方式 this.$store.dispatch() ``` // Store.js // 定义 Action const store = new Vuex.Store({ // ...省略其他代码 mutations:{ addN(state,step){ state.count += step } }, actions:{ addNAsync(context,step){ setTimeout(()=>{ // 在 actions 中，不能直接修改 state 中的数据 // 必须通过 context.commit() 触发某个 mutation 才行 context.commit('addN',setp) },1000) } } }) ``` ``` // 目标组件 methods:{ handle(){ // 在调用 dispatch 函数 // 触发 actions 时携带参数 this.$store.dispatch('addNasync',5) } } ``` 第二种方式 ...mapActions({'addAsync','addNaSync'}) ``` // 目标组件中 // 1.从 vuex 中按需导入 mapActions 函数 import { mapActions } from 'vuex' // 2.将指定的 actions 函数，映射为当前组件的 methods 函数 methods:{ ...mapActions({'subAsync'}), // 以下这个函数可以不要，需要调用函数时直接调用 subAsync 这个函数名 btnHandler3(){ this.subAsync() } } ``` #### 3.4 Getter Getter 用于对Store 中的数据进行加工梳理形成的新数据 - 1：Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性 - 2：Store 中数据发生变化，Getter 的数据也会发生变化 - 3：Getter 不会修改 Store 中的数据，它只起到包装的作用 ``` // store.js // 定义 Getter const store = new Vuex.Store({ state:{ count:0 }, getters:{ showNum:state =>{ return '当前最新的数量是【'+state.count +'】' } ``` **第二种** ``` import { mapGetters } from 'vuex' computed:{ ...mapGetters(['showNum']) } ``` 原文：https://blog.csdn.net/qq_51688013/article/details/123304310