Pinia怎么实现简单的用户状态管理

这篇“Pinia怎么实现简单的用户状态管理”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Pinia怎么实现简单的用户状态管理”文章吧。

Store是什么？

全局状态，用于在所有组件中，同步数据。

Store的应用场景?

在整个应用程序中访问的数据（且不需要被持久化），例如导航栏中显示的用户信息，以及需要通过页面保留的数据，例如一个非常复杂的多步骤表格。

pinia是什么？

简单一句介绍，Vuex的升级版，抛弃了烦人的Mutation。

其他优点

• action支持同步和异步；

• 良好的typescript支持；

• 支持用插件扩展功能；

• 扁平架构，没有嵌套；

• 服务端渲染支持。

应用示例

下面我们以一个管理平台的员工账号信息为例，展示Pinia的使用方式。

本文作者认为setup是更好的组织代码的方式，所以都用setup编写下面的示例。

安装和挂载部分，直接看文档。

定义Store

import { defineStore } from 'pinia'// 第一个参数是应用程序中 store 的唯一 idexport 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 的唯一 idexport const useUserStore = defineStore('user', {  state: () => {    return {      // 所有这些属性都将自动推断其类型      userName: 'lucio',      userId: '001',    }  },})

读取和写入state

• 通过store示例，可读写。

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 })})

• 替换整个state

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 的唯一 idexport 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的实例访问。

userStore.userText

（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怎么实现简单的用户状态管理”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。