Store是什么?
全局状态,用于在所有组件中,同步数据。
Store的应用场景?
在整个应用程序中访问的数据(且不需要被持久化),例如导航栏中显示的用户信息,以及需要通过页面保留的数据,例如一个非常复杂的多步骤表格。
pinia是什么?
简单一句介绍,vuex的升级版,抛弃了烦人的Mutation。
其他优点
- action支持同步和异步;
- 良好的TypeScript支持;
- 支持用插件扩展功能;
- 扁平架构,没有嵌套;
- 服务端渲染支持。
应用示例
下面我们以一个管理平台的员工账号信息为例,展示Pinia的使用方式。
本文作者认为setup
是更好的组织代码的方式,所以都用setup
编写下面的示例。
安装和挂载部分,直接看文档。
定义Store
- import { defineStore } from 'pinia'
-
- // 第一个参数是应用程序中 store 的唯一 id
- export const useUserStore = defineStore('user', {
- // other options...
- })
使用Store
- import { useUserStore } from '@/stores/user'
-
- export default {
- setup() {
- const userStore = useUserStore()
-
- return {
- // 您可以返回整个 store 实例以在模板中使用它
- userStore,
- }
- },
- }
(如果习惯用选项式API,还是可以配合map helpers,声明各种map来访问store。)
获取store的响应式数据
直接解构会破坏响应式,需要用storeToRefs()
提取属性并保持响应式。
- import { storeToRefs } from 'pinia'
-
- export default defineComponent({
- setup() {
- const userStore = useUserStore()
- // ? 这不起作用,因为它会破坏响应式
- // 这和从 props 解构是一样的
- const { userName } = userStore
-
- // 这样可以保持响应式
- const { userId } = storeToRefs(userStore)
-
- userName // "lucio"
- userId // "001"
-
- return {
- // 一直会是 "lucio"
- userName,
- // 这将是响应式的
- userId,
- // 这将是响应式的
- realUserName: computed(() => userStore.userName),
- }
- },
- })
State
返回初始状态的函数。
我们补全一下上面的定义Store部分的代码。
初始化
- import { defineStore } from 'pinia'
-
- // 第一个参数是应用程序中 store 的唯一 id
- export const useUserStore = defineStore('user', {
- state: () => {
- return {
- // 所有这些属性都将自动推断其类型
- userName: 'lucio',
- userId: '001',
- }
- },
- })
读取和写入state
- const userStore = useUserStore()
- userStore.userId = '002'
- userStore.$reset()
- return { userStore }
- 通过
$patch
修改多个数据,参数可以是对象或者函数。
- // 一次修改多个数据
- userStore.$patch({
- userId: '002',
- userName: 'lucy',
- })
- // 适合对数组进行修改
- userStore.$patch((state) => {
- state.roles.push({ name: 'admin', priority: 1 })
- })
- userStore.$state = { userId: '002', userName: 'lucy'}
- // 或者通过pinia实例替换整个应用程序的状态
- pinia.state.value = {}
订阅state变化
可以通过 store 的 $subscribe()
方法查看状态及其变化,其只在patch之后触发一次。
默认情况下,组件卸载后,订阅会被删除。如果想保留,设置配置项detached为true。
- userStore.$subscribe((mutation, state) => {
- // import { MutationType } from 'pinia'
- mutation.type // 'direct' | 'patch object' | 'patch function'
- // 与 userStore.$id 相同
- mutation.storeId // 'user'
- // 仅适用于 mutation.type === 'patch object'
- mutation.payload // 补丁对象传递给 to userStore.$patch()
-
- // 每当它发生变化时,将整个状态持久化到本地存储
- localStorage.setItem('user', JSON.stringify(state))
- },
- { detached: true }, // detached为true,卸载组件后保留订阅
- )
Getters
返回状态的计算值。
定义getter
- import { defineStore } from 'pinia'
-
- // 第一个参数是应用程序中 store 的唯一 id
- export const useUserStore = defineStore('user', {
- state: () => {
- return {
- // 所有这些属性都将自动推断其类型
- userName: 'lucio',
- userId: '001',
- }
- },
- getters: {
- // 自动推断返回类型为字符串
- userText: (state) => `User: ${state.userName}`,
- // 也可以使用其他getter, 用this访问store实例,必须要定义返回类型
- userTextPlus: (): string => `The name of ${this.userText}`,
- }
- })
访问getter
直接用store的实例访问。
(getters也可以传递参数,不是很常用的场景,这里就不示例了。)
(在A store中,也可以使用B store的getter)
Actions
相当于组件中的methods,适合用于定义组件的业务逻辑。
定义action
下面我们继续补全上面的示例,在userStore中通过网络请求获取用户数据。
- import { defineStore } from 'pinia'
-
- export const useUserStore = defineStore('user', {
- state: () => {
- return {
- userName: 'lucio',
- userId: '001',
- userData: null,
- }
- },
- getters: {
- // ...
- },
- actions: {
- async loginAndGetUserInfo(password) {
- try {
- this.userData = await api.login({password});
- showToast('Login success');
- } catch(error) {
- showToast(error);
- return error;
- }
- }
- }
- })
订阅action
可以使用 store.$onAction()
订阅 action 及其结果。
下面对userStore
添加一个订阅,记录上面的登陆操作,所用的时间
- const unsubscribe = userStore.$onAction(
- ({
- name, // action 的名字
- store, // store 实例
- args, // 调用这个 action 的参数
- after, // 在这个 action 执行完毕之后,执行这个函数
- onError, // 在这个 action 抛出异常的时候,执行这个函数
- }) => {
- // 记录开始的时间变量
- const startTime = Date.now()
- // 这将在 `store` 上的操作执行之前触发
- console.log(`Start "${name}" with params [${args.join(', ')}].`)
-
- // 如果 action 成功并且完全运行后,after 将触发。
- // 它将等待任何返回的 promise
- after((result) => {
- console.log(
- `Finished "${name}" after ${
- Date.now() - startTime
- }ms.\nResult: ${result}.`
- )
- })
-
- // 如果 action 抛出或返回 Promise.reject ,onError 将触发
- onError((error) => {
- console.warn(
- `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
- )
- })
- }
- )
-
- // 手动移除订阅
- unsubscribe()
和订阅state一样,组件卸载时,订阅将被删除,可以添加设置第二个参数detach
为true,在卸载组件后仍然保留订阅。
- export default {
- setup() {
- const someStore = useSomeStore()
-
- // 此订阅将在组件卸载后保留
- someStore.$onAction(callback, true)
-
- // ...
- },
- }
总结
到此这篇关于Pinia入门学习之实现简单的用户状态管理的文章就介绍到这了,更多相关Pinia用户状态管理内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!