一、Vuex概述
-
组件之间共享数据的方式
父向子传值: v-bind(😃 属性绑定
子向父传值:v-on(@) 时间绑定
兄弟组件之间的共享数据:EventBus
+ $on 接受数据的那个组件 + $emeit 发送数据的那个组件
-
Vuex是什么
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享
-
使用Vuex统一管理状态(数据)的好处
- 能够在Vuex中集中管理共享的数据,易于开发和后期维护
- 能够高效地实现组件之间的数据共享,提高开发效率
- 存储在Vuex中的数据都是响应式的,能够实时保持数据与页面的同步
-
什么样的数据适合存储到Vuex中
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;
对于组件中的私有数据,依旧存储在组件自身的data中即可
二、Vuex的基本使用
-
按照vuex安装包
-
导入vuex
-
创建store对象
state中存放的就是全局共享的数据
-
将store对象挂载到vue实例中
三、Vuex的核心概念
vuex的主要核心概念如下:
- state
- mutation
- action
- getter
-
state
state 提供唯一的公共数据源,所有共享的数据都要统一放到store的state中进行存储
组件访问state中数据的第一种方式:
this.$store.state.全局数据名称
组件访问state中数据的第二种方式:
// 从vuex中按需导入mapState函数 import {mapState} from 'vuex' // 通过干次啊导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性 // 将全局数据,映射未当前组件的计算属性 computed:{ ...mapState(["count"]) }
-
mutation
mutation用于变更store中的数据
-
只能通过mutation变更store数据,不可以直接操作store的数据
-
通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化
-
可以在触发mutations时传递参数
const store = new Vuex.Store({ state:{ count:0 }, mutations:{ add(state){ // 变更状态 state.count ++ } addN(state,step){ // 变更状态 state.count += step } } }) // 触发mutation的第一种方式 methods:{ handle(){ // 触发mutations的第一种方式 this.$store.commit('add') } handle(){ // 触发mutations的第一种方式 this.$store.commit('add',3) } } // 触发mutation的第二种方式 // 1. 从vuex中按需导入mapMutations函数 import {mapMutations} from "vuex" // 通过导入的mapMutation函数,映射当前组件未methods函数 methods:{ ...mapMutations(["add","addN"]) }
-
-
action
action用于处理异步任务
如果通过异步操作变更数据,必须通过action,而不能使用mutation,但是在action中还是要通过触发mutation的方式间接变更数据。
// 定义action const store = new Vuex.Store({ // ...省略其他代码 mutations:{ add(state){ state.count++ } addN(state,step){ // 变更状态 state.count += step } }, actions:{ addAsync(context){ setTimeout(() => { contexte.commit('add',1000) }) } addAsync(context){ setTimeout(() => { contexte.commit('add',1000) }) } } }) // 触发action methods:{ handle(){ // 第一种方式 this.$store.dispatch('addAsync') } handle(){ // 携带参数 this.$store.dispatch('addAsync',5) } } // 第二种方式 // 从vuex中按需导入masActions函数 import {mapActions} from 'vuex' //通过导入的mapactions函数,映射当前组件为methods函数 methods:{ ...mapActions(['addAsync','addNasync']) }
-
getter
getter用于对store中的数据进行加工处理形成新的数据
-
getter可以对store中已有的数据加工处理之后形成新的数据,类似vue的计算属性
-
store中的数据发生变化,getter的数据也会跟着变化
const store = new Vuex.Store({ state:{ count:0 }, getters:{ showNum:state => { return '当前最新的数量'+state.count } } })
使用getters的第一种方式:
this.$store.getters.名称
使用getters的第二种方式:
import {mapGetters} from 'vuex' computed:{ ...mapGetters(['showNum']) }
-
如何清除已完成的任务? 过滤,重新赋值