状态管理
- 在开发中,我们会用应用程序处理很多的数据,这些数据需要保存在我们应用程序徐的某一个位置,对于这些数据的管理我们就称之为状态管理
image.png
使用方法
- 下载vuex最新版
npm install vuex@next
-
新建文件夹及文件
image.png
* index.js导入createStore ,并创建state共享数据
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
counter: 100
}
}
})
export default store;
- 在main.js文件中添加依赖并使用
import store from './store'
createApp(App).use(store).mount('#app')
- 在组件中使用
<h2>{{$store.state.counter}}</h2>
- 组件方法中获取数据(不建议修改)
this.$store.state.counter
-
组件方法通过commit修改数据(建议)
单一状态树
- 定义:用一个对象就包含全部的应用层级的状态
- 单一状态树的优势:能够使用最直接的方式找到每个状态片段,方便维护、调试和管理
mapState方法
- 导入
-
使用
option api
setup()做法
封装成一个函数
es6之扩展运算符 三个点(…)
- 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
相当于
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
getter的基本使用
- 类似于computed
- 当多个计算属性时,我们可以使用
mapGetters
(需要要导入)
image.png
mutations
-
提交数据
-
mapMutations
image.png - 提交到根里面 image.png
actions的基本使用(派发)
-
可以进行异步操作
context
-
派发到根actions里面
-
派发风格------对象类型
-
辅助函数 mapActions
image.png -
setup函数中使用
-
结合axios和promise做异步请求
modules(模块)
- 使每个模块都拥有自己的state、mutation、action、getter,甚至嵌套子模块
-
基本使用
导出
userModule
导入
-
拿一个模块里面的getters里面的数据
其他模块的getters里面的数据在根getters会做一个合并,
actions和mutations里面的数据同样会做合并
image.png
但是这种方法很难让人知道数据到低是从那个文件传过来的
so:我们在定义模块的时候,在其对象里面设置属性
使用
- 在组件里使用模块辅助函数
写法一
写法二:
import { createNamespacedHelpers, mapState, mapGetters, mapMutations, mapActions } from "vuex"; const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers("home")
computed(){
...mapState(["homeCounter"]),
...mapGetters(["doubleHomeCounter"])
}
关于映射返回函数的处理方式(就算有子模块也适用)
- 使用方法
("模块名字",["方法名"])
const getters = useGetters("home", ["doubleHomeCounter"])
- 出口函数index.js
import { useGetters } from './useGetters';
import { useState } from './useState';
export {
useGetters,
useState
}
- useState.js
import { mapState, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'
export function useState(moduleName, mapper) {
let mapperFn = mapState
if (typeof moduleName === 'string' && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapState
} else {
mapper = moduleName
}
return useMapper(mapper, mapperFn)
}
- useGetters.js
import { mapGetters, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'
export function useGetters(moduleName, mapper) {
let mapperFn = mapGetters
if (typeof moduleName === 'string' && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapGetters
} else {
mapper = moduleName
}
return useMapper(mapper, mapperFn)
}
- useMapper.js
import { computed } from 'vue'
import { useStore } from 'vuex'
export function useMapper(mapper, mapFn) {
// 拿到store独享
const store = useStore()
// 获取到对应的对象的functions: {name: function, age: function}
const storeStateFns = mapFn(mapper)
// 对数据进行转换
const storeState = {}
Object.keys(storeStateFns).forEach(fnKey => {
const fn = storeStateFns[fnKey].bind({$store: store})
storeState[fnKey] = computed(fn)
})
return storeState
}
网友评论