vuex的核心使用-2
State
1. 介绍
在Vuex中，State是存储数据的核心概念，它代表了整个应用程序的最终状态。
State是响应式的，这意味着当State中的数据发生变化时，依赖于这些数据的视图组件会自动更新。
State可以包含任何类型的数据，如字符串、数字、对象、数组等。在Vuex中，State的数据结构是由开发者自己定义的，可以根据应用程序的需求进行设计。
2. 创建数据
在主仓库中创建：
// 创建仓库 store
const store = new Vuex.Store({
modules: {
user
},
// 开启严格模式
strict: true,
// 通过state 提供共享数据
state: {
title: '大能静静学院',
count: 100,
xxx,
....
},
mutations: {
addCount (state, num) {
console.log(num)
state.count += num
},
updateCount (state, num) {
console.log(num)
state.count = +num
}
},
actions: {
asyncAddCount (content) {
setTimeout(() => content.commit('addCount', -1), 1000)
}
},
getters: {
}
}
在user模块中创建
// 数据
const state = {
list: [1, 2, 3, 4]
}
const mutations = {}
const actions = {}
const getters = {}
export default {
namespaced: 'true', // 开启命名空间
state,
mutations,
actions,
getters
}
3. 获取数据
3.1 通过$store访问的语法获取：
a. 获取主仓库中的数据
模板中： {{ $store.state.xxx }}
组件逻辑中： this.$store.state.xxx
JS模块中： store.state.xxx
b. 获取模块中的数据
$store.state.模块名.xxx
// 如：
$store.state.user.list
3.2 mapState 映射函数获取：
a. 获取主仓库中的数据
- 导入mapState (mapState是vuex中的一个函数)
import { mapState } from 'vuex'
- 利用展开运算符将导出的状态映射给计算属性
computed: {
...mapState(['count'])
},
- 直接使用
<div> state的数据：{{ count }}</div>
b. 获取模块中的数据
- 将上面a 的第二步改为：下面的这个形式即可
computed: {
...mapState('user', ['list']),
...mapState('模块名', ['数据名1', '数据名2']),
},
mutations
1. 介绍
Mutation：用来修改state的唯一途径。在Vuex中，任何对state的修改都必须是显式提交mutation。mutation必须是同步函数。
类似于：methods
2. 创建数据
在主仓库中创建：
// 创建仓库 store
const store = new Vuex.Store({
modules: {
user
},
mutations: {
// 方法里参数 第一个参数是当前store的state属性
// payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
addCount (state, num) {
console.log(num)
state.count += num
}
}
}
在user模块中创建
// 数据
const state = {}
const mutations = {
addCount (state, num) {
console.log(num)
state.count += num
},
}
const actions = {}
const getters = {}
export default {
namespaced: 'true', // 开启命名空间
state,
mutations,
actions,
getters
}
3. 获取数据
3.1 通过$store访问的语法获取：
a. 获取主仓库中的数据
handle ( ) {
this.$store.commit('addCount', 10)
// this.$store.commit('addCount', num)
}
b. 获取模块中的数据
// 在组件中
this.$store.commit('user/addCount', 参数);
3.2 mapState 映射函数获取：
a. 获取主仓库中的数据
- 导入mapState (mapState是vuex中的一个函数)
- 利用展开运算符将导出的状态映射给计算属性
import { mapMutations } from 'vuex'
methods: {
...mapMutations(['addCount'])
}
- 使用
<button @click="addCount">值+1</button>
b. 获取模块中的数据
methods:{
// 分模块的映射
...mapMutations('user', ['addCount']),
}
actions
1. 介绍
Action：类似于mutation，可以包含任意异步操作。
2. 创建数据
在主仓库中创建：
// 创建仓库 store
const store = new Vuex.Store({
modules: {
user
},
actions: {
setAsyncCount (context, num) {
// 一秒后, 给一个数, 去修改 num
setTimeout(() => {
context.commit('changeCount', num)
}, 1000)
}
},
}
在user模块中创建
// 数据
const state = {}
const mutations = {}
const actions = {
setAsyncCount (context, num) {
// 一秒后, 给一个数, 去修改 num
setTimeout(() => {
context.commit('changeCount', num)
}, 1000)
}
}
const getters = {}
export default {
namespaced: 'true', // 开启命名空间
state,
mutations,
actions,
getters
}
3. 获取数据
3.1 通过$store访问的语法获取：
a. 获取主仓库中的数据
handle ( ) {
this.$store.dispatch('setAsyncCount', 参数)
}
b. 获取模块中的数据
// 在组件中
this.$store.dispatch('user/setUserSecond', 参数)
3.2 mapActions 映射函数获取：
a. 获取主仓库中的数据
- 导入mapActions(mapActions是vuex中的一个函数)
- 利用展开运算符将导出的状态映射给计算属性
import { mapActions } from 'vuex'
methods: {
...mapActions(['changeCountAction'])
}
- 使用
<button @click="changeCountAction(200)">+异步</button>
b. 获取模块中的数据
<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>
methods:{
...mapActions('user', ['setUserSecond'])
}
getters
1. 介绍
Getter：对state进行更复杂的数据操作，例如计算属性。这些计算属性的值是基于state的计算得出的。
2. 创建数据
在主仓库中创建：
// 创建仓库 store
const store = new Vuex.Store({
modules: {
user
},
getters: {
// getters函数的第一个参数是 state
// 必须要有返回值
filterList: state => state.list.filter(item => item > 5)
}
}
在user模块中创建
// 数据
const state = {}
const mutations = {}
const actions = {}
const getters = {
// getters函数的第一个参数是 state
// 必须要有返回值
filterList (state) {
state.list.filter(item => item > 5)
}
}
export default {
namespaced: 'true', // 开启命名空间
state,
mutations,
actions,
getters
}
3. 获取数据
3.1 通过$store访问的语法获取：
a. 获取主仓库中的数据
<div>{{ $store.getters.filterList }}</div>
b. 获取模块中的数据
$store.getters['模块名/属性名']
3.2 mapActions 映射函数获取：
a. 获取主仓库中的数据
- 导入mapActions(mapActions是vuex中的一个函数)
- 利用展开运算符将导出的状态映射给计算属性
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['filterList'])
}
- 使用
<div>{{ filterList }}</div>
b. 获取模块中的数据
// 计算属性
computed:{
...mapGetters('user', ['filterList'])
}
总结
1. 直接使用
1. state --> $store.state.模块名.数据项名
2. getters --> $store.getters['模块名/属性名']
3. mutations --> $store.commit('模块名/方法名', 其他参数)
4. actions --> $store.dispatch('模块名/方法名', 其他参数)
2. 借助辅助方法使用
import { mapXxxx, mapXxx } from 'vuex'
computed、methods: {
// **...mapState、...mapGetters放computed中；**
// **...mapMutations、...mapActions放methods中；**
...mapXxxx('模块名', ['数据项|方法']),
...mapXxxx('模块名', { 新的名字: 原来的名字 }),
}
3. 组件中直接使用
- 属性
{{ age }}或 方法@click="updateAge(2)"