文章目录
1 Vuex概述
1.1 组件之间共享数据的方式
父向子传值:v-bind属性绑定(props)
子向父传值:v-on 事件绑定
兄弟组件之间共享数据:EventBus($on数据接收方,$emit发送数据的内个组件)
以上的三种方式是小范围的数据共享
1.2 Vuex是什么
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享。
1.3 使用Vuex统一管理状态的好处
- 能够在Vuex中集中管理共享的数据,抑郁开发和后期维护。
- 能够高效的实现组件之间的数据共享,提高开发效率
- 存储在Vuex中的数据都是响应式的,能够实时保持数据与页面的同步。
一般情况下,只有组件之间共享的数据,才有必要存储到Vuex中,对于组件中的私有数据,依旧存储在组件自身的data中即可。
2.Vuex的基本使用
- ① 安装vuex依赖包
cnpm install vuex --save
- ②导入Vuex包
import Vuex from 'vuex' Vue.use(Vuex)
- ③创建store对象
const store = new Vuex.Store({
// state中存放的是全局共享的数据
state:{count:0}
})
- 将store对象挂载到vue实例中
new Vue({
el:'#app',
render:h=>h(app),
router,
// 创建的共享数据对象,挂载到Vue实例中,多有组件可以直接从store中获取全局的数据
store
})
3 Vuex 的核心概念
3.1核心概念概述
- Vuex中的主要核心概念如下:
- State
- Mutation
- Action
- Getter
3.2 State
State 提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储
//创建Store数据源,提供唯一的公共数据
const store = new Vuex.Store({
state:{
count: 0
}
})
组件中访问State中数据的方式为:
①this.$store.state.全局数据名称
②利用mapState进行映射,以下是具体的步骤。
//1.从Vuex中按需导入mapState函数
import {mapState} from 'vuex'
通过导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computer计算属性
//2.将全局数据,映射为当前组件的计算属性
computed: {
...mapState(['count'])
}
在Vuex中不允许组件直接修改store里的数据!!
3.3 Mutation
Mutation 用于变更Store中的数据。
- 只能通过mutation变更Store数据,不可以直接操作Store中的数据。
- 通过这种方式虽然操作起来稍微繁琐,但是可以集中监控所有数据的变化。
// 定义Mutation
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
madd(state) {
// 变更状态
state.count++
}
}
})
** 触发mutation的第一种方式 **
// 触发mutation
methods:{
handlel(){
// 触发mutation 的第一种方式
// $store提供的commit触发mutation中函数的方法
this.$store.commit('madd')
}
}
只有mutation中的函数才有权利修改state中的数据!!
** 调用mutation 时传递参数 :**
// 定义Mutation
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
//第一个参数都是state
addN(state,step) {
// 变更状态
state.count += step
}
}
})
// 触发mutation
methods: {
handle2 () {
// 在调用commit函数,
// 触发mutation时携带参数
this.$store.commit('addN',3)
}
}
** 触发mutation 的第二种方式 **:
// 1.vuex中按需导入 mapMutations 函数
import {mapMutations} from 'vuex
通过导入的mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法
// 2.将指定的mutations函数,映射为当前组件的methods函数
methods:{
...mapMutations(['madd','addN'])
}
mutation 中不能写异步操作
3.4 Action
Action 用于处理异步任务;
如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是Action中还是要通过触发Mutation的方式间接变更数据。
// store.js
// 定义Action
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
madd(state) {
state.count++
}
},
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('madd')
},1000)
}
}
})
// 对应组件中
methods: {
handle() {
// 这里dispatch 函数,专门用来触发action
// dispatch触发actions 的第一种方式
this.$store.dispatch('addAsync')
}
}
在actions中,不能直接修改 state 中的数据。如果要修改必须通过 context.commit() 触发某个 mutation 才行。换而言之,action并没有修改state的权利
触发actions异步任务时携带参数
this.$store.dispatch()是触发actions的第一种方式;
触发actions的第二种方式:
// 1.vuex中按需导入 mapActions 函数
import {mapActions} from 'vuex
通过导入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法:
// 将全局store中的某个actions方法映射为methods方法
// 使用映射方法时,既可以直接使用,也可以声明一个函数,将其引入使用。如果被映射的函数是一个带参数的函数,可以直接将参数写入
...mapActions(['addAsync','addNASync'])
3.5 Getter
Getter用于对Store中的数据进行加工处理形成新的数据。
它不会修改state中的原数据,只起到包装的作用
①Getter可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
②Store中数据发生变化之后,getter的数据也会跟着变化。
// 定义getter
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
showNum: state => {
return '当前最新的数量是【' + state.count + '】'
}
}
})
使用getters的第一种方式:
this.$store.getters.名称
使用getters的第二种方式:
import { mapGetters } from 'vuex'
// 可以将Getters中的内容映射到computed中
computed: {
...mapGetters(['showNum'])
}