1.Vuex概述
1.1 组件之间共享数据的方式
父向子传值：v-bind属性绑定
子向父传值：v-on事件绑定
兄弟组件之间共享数据：EventBus
- $on 接受数据的那个组件
- $emit 发送数据的那个组件
大范围实现数据共享时，这三种方案就有点力不从心了。
1.2 Vuex是什么？
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件间数据的共享。
在项目中大范围和频繁的实现数据共享，推荐使用Vuex。
1.3 使用Vuex统一管理状态的好处
- 能够在Vuex中集中管理共享的数据，易于开发和后期维护。
- 能够高效地实现组件之间地数据共享，提高开发效率。
- 存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步
1.4 什么样的数据适合存储到Vuex中
一般情况下，只有组件之间共享的数据，才有必要存储到Vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可。
2. Vuex的基本使用
- 安装vuex依赖包
npm install vuex --save 复制代码
- 导入vuex包
import Vuex from 'vuex' Vue.use(Vuex) 复制代码
- 创建store对象
- 将store对象挂载到vue实例中
import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, }) new Vue({ render: (h) => h(App), store,// 将创建的共享数据对象，挂载到vue实例中 // 所有的组件，就可以直接从store中获取全局的数据了 }).$mount("#app") 复制代码
3. Vuex的核心概念
3.1 核心概念概述
Vuex中的主要核心概念如下：
- State
- Mutation
- Action
- Getter
3.2 State
State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中存储。
const store = new Vuex.Store({ state:{count:0} }) 复制代码
组件访问State数据的第一种方式
this.$store.state.count 复制代码
组件访问State数据的第二种方式
// 1.从vuex中按需导入mapState函数 import {mapState} from 'vuex' 复制代码
// 2.将全局数据，映射为当前组件的计算属性 computed:{ ...mapState(['count']) } 复制代码
##3.3 Mutation
在Vuex中不允许组件之间去修改Store里面的数据
Mutation用于变更Store中的数据
- 只能通过mutation变更Store数据，不可以直接操作Store中的数据。
- 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
// 定义Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { add(state) { state.count++ }, }, }) 复制代码
// 触发Mutation methods:{ add(){ // 触发mutation的第一种方式 this.$store.commit('add') } } 复制代码
可以在触发mutation时传递参数：
// 定义Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { add(state,step) { state.count+=step }, }, }) 复制代码
触发mutation的第一种方式
// 触发Mutation methods:{ add(){ // 触发mutation的第一种方式 this.$store.commit('add',3) } } 复制代码
触发mutation的第二种方式
// 1. 从vuex中按需导入mapMutation函数 import {mapMutations} from 'vuex' 复制代码
通过刚才导入的mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法。
<template> <div> <p>当前count的最新值为：{{count}}</p> <button @click="handle2">+1</button> </div> </template> <script> import {mapState,mapMutations} from 'vuex' export default { data(){ return{} }, methods:{ ...mapMutations(['sub','subN']), handle2(){ this.subN(3) } }, computed:{ ...mapState(['count']) } } </script> 复制代码
第二种方法可以通过this.直接调用映射过来方法。
3.4 Action
不要在mutation函数中，执行异步操作
// 下面这种写法是错误的 mutation:{ add(state){ setTimeout(()=>{ state.count++ },1000) } } 复制代码
Action用于处理异步任务的。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。
// 定义Action const store = new Vuex.Store({ state: { count: 0 }, mutations: { add(state) { state.count++ }, }, actions: { addAsync(context) { // 在actions中，不不能直接修改state里的值，必须通过commit修改state里的值。 setTimeout(() => { context.commit("add") }, 1000) }, }, }) 复制代码
触发actions的第一种方式
// 触发action methods:{ handle(){ // 这里的dispatch函数专门用来触发action this.$store.dispach('addAsync') } } 复制代码
异步操作不能直接修改state里的值必须通过mutation修改。
触发action异步任务时携带参数
actions: { addAsync(context) { setTimeout(() => { context.commit("add") }, 1000) }, addNAsync(context, step) { setTimeout(() => { context.commit("addN", step) }, 1000) }, }, 复制代码
methods:{ add(){ // commit的作用就是调用某个mutation函数 //this.$store.commit('add') this.$store.dispatch('addAsync') }, addN(){ this.$store.dispatch('addNAsync',4) } } 复制代码
触发actions的第二种方式：
// 1. 从vuex中按需导入mapActions函数 import {mapActions} from 'vuex' 复制代码
// 2. 通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法： methods:{ ...mapActions(['addAsync','addNAsync']) // 此处在组件中也可以直接使用addNAsync函数，下面的代码可省略 handle3(){ this.addNAsync(3) } } 复制代码
代码实现：
3.5 Getter（只起到包装的作用）
Getter用于对Store中的数据进行加工处理形成新的数据。
- Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
- Store中数据发生变化，Getter的数据也会跟着发生变化。
// 定义Getter const store = new Vuex.Store({ state:{ count:0 }, getters:{ showNum:state=>{ return '当前最新的数量是【'+ state.count +'】' } } }) 复制代码
使用getters的第一种方式
this.$store.getters.showNum 复制代码
使用getters的第二种方式
import {mapGetters} from 'vuex' computed:{ ..mapGetters(['showNum']) } 复制代码
代码实现：
最后
如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
