亲宝软件园·资讯

展开

Pinia入门学习之实现简单的用户状态管理

前端lucio 人气:0

Store是什么?

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

Store的应用场景?

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

pinia是什么?

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

其他优点

应用示例

下面我们以一个管理平台的员工账号信息为例,展示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 }
// 一次修改多个数据
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的实例访问。

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)

    // ...
  },
}

总结

加载全部内容

相关教程
猜你喜欢
用户评论