核心概念概述
Vuex中的主要核心概念如下:
- State
- Multation
- Action
- Getter
State
State提供为一的公共数据源,所有共享的数据都要统一返稿Store的State中进行存储
// 创建store数据源 提供唯一公共数据
const store = new Vuex.Store({
state: {count: 0}
})
组件中访问State中数据的第一种方式:
this.$store.state.全局数据名称
组件中访问State中数据的第二种方式:
// 从vuex中按需导入mapState函数
import { mapState } from 'vuex'
通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性:
// 将全局数据 因设为当前组件的计算属性
computed: {
...mapState(['count'])
}
Mutation
Mutation用户变更store中的数据
- 只能通过mutation变更store数据,不可以直接操作store中的数据
- 通过这种方式虽然操作起来繁琐,但是可以集中监控所有数据的变化
在vuex中,不建议组件直接修改store中的数据,以下为错误实例,不建议使用如下方式,这种方式不利于后期维护,很难查看数据是被什么组件修改的
<template>
<div>
<h3>当前最新的count值为:{{ $store.state.count }}</h3>
<button @click="btnHandler1">+1</button>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
btnHandler1() {
this.$store.state.count++
}
}
}
</script>
<style>
</style>
使用Mutation变更Store中的数据
// 定义Mutation
const store = new Vuex.Store({
state: {
count: 0
},
mutations:{
add(state) {
// 变更状态
state.count++
}
}
})
如下为触发mutation的第一种方式
// 触发mutation
methods: {
handle1() {
// 触发mutation的第一种方式
this.$store.commit('add')
}
}
在触发mutation时传递参数
// 定义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)
}
}
触发mutation的第二种方式
// 从vuex中按需导入mapMutation函数
import { mapMutation } from 'vuex'
通过刚才导入的mapMutation函数,将需要的mutations函数,因设为当前组件的methods方法
// 将指定的mutations函数,映射为当前组件的methods函数
methods: {
...mapMutations({['add', 'addN'})
}
Action
Action用于处理异步任务
在vuex中的mutation节点,不能直接执行异步操作:
add(state) {
// 不要在mutations函数中 执行异步操作
setTimeout(() => {
state.count++
}, 1000)
}
在mutation中执行如上代码,会导致虽然页面中的值正常的发生了变化,但是vue调试其中会发现数值不同步
因此,如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据
// 定义Action
const store = new Vuex.Store({
// 省略部分代码
mutations: {
add(state) {
state.count++
}
},
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000)
}
}
})
如下为触发actions的第一种方式
// 触发Action
methods: {
handle() {
// 触发actions的第一种方式
this.$store.dispatch('addAsync')
}
}
触发actions异步任务时携带参数
// 定义Action
const store = new Vuex.Store({
// 省略部分代码
mutations: {
addN(state, step) {
state.count += step
}
},
actions: {
addNAsync(context, step) {
setTimeout(() => {
context.commit('addN', step)
}, 1000)
}
}
})
// 触发Action
methods: {
handle() {
// 触发actions的第一种方式
this.$store.dispatch('addNAsync', 5)
}
}
触发actions的第二种方式
this.$store.dispatch()是触发actions的第一种方式,触发actions的第二种方式:
// 从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'
通过刚才导入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法:
methods: {
...mapActions(['addAsync', 'addNAsync'])
}
已经映射到当前组件的方法,如上的'addAsync',可以直接在@click="addAsync"中使用,例如
<button @click="addAsync">+1 Async</button>
Getter
Getter用于对Store中的数据进行加工处理形成新的数据
- Getter可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性,不会影响到原本的数据
- Store中的数据发生变化,Getter的数据也会跟着变化
// 定义Getter
const sotre = new Vuex.store({
state: {
count: 0
},
getter: {
showNum: state => {
return '当前最新的数量是[' + state.count + ']'
}
}
})
Getter的使用方式
使用getters的第一种方式
this.$store.getters.名称
使用getters的第二种方式
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['showNum'])
}
在计算属性中引入mapGetters,即可使用插值表达式等方式展示数据