1. Introdução
Piniaé Vueuma biblioteca proprietária de gerenciamento de estado que permite compartilhar o estado entre componentes ou páginas. Tem Vuexuma certa semelhança com , mas ainda existem grandes diferenças.
Aqueles que desejam ler este blog devem ter lido a documentação oficial. A documentação oficial é muito detalhada e contém vários cenários e teorias de uso. Portanto, este artigo não fala sobre a teoria, mas apenas os métodos de uso específicos. Se você quiser para estudar a fundo, recomenda-se a leitura da documentação oficial. Documentação, este artigo é adequado para uso imediato.
2. Como usar
1. Instalação
yarn add pinia
# 或者使用 npm
npm install pinia
2. Introdução
principal.ts
import {
createApp } from 'vue'
import {
createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app') // vue3 的简写语法
Se você não está familiarizado com a sintaxe abreviada de vue3, pode escrevê-la da seguinte maneira, o efeito é o mesmo
principal.ts
import {
createApp } from 'vue'
import {
createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
3. Crie arquivos
Em srcArquivos, Criar storeArquivos, dentro de Criar tsArquivos por Módulo (também pode ser js).
Nota: pinia Não há necessidade de criar modulesum arquivo para distinguir a modularidade, que é vuexa diferença entre ele e .
Veja o módulo para salvar informações do usuário após o login como exemplo:
Nota: Recomenda- se que o método de nomenclatura seja unificado e padronizado use + id + store. O exemplo useUserStoreé id.user
loja/usuário.ts
import {
defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
userInfo: {
}
}),
actions: {
SetUserInfo(data: any) {
this.userInfo = data
}
}
})
4. Uso
Primeiro introduza o módulo e, em seguida, atribua o objeto do módulo importado à variável store(nomeie-o como desejar). Se você não precisar modificar os dados, use para constdeclarar a variável. Se precisar modificar os dados, use para letdeclarar .
Nota: O nome do objeto do módulo importado deve ser export constconsistente com aquele declarado no módulo.
.ts ou .vue
import {
useUserStore } from '@/store/user'
const store: any = useUserStore()
console.log(store.userInfo)
5. Modifique os dados
Há muitas maneiras de modificar dados, você pode modificá-los diretamente ou usar ações para modificá-los.
Método 1: modificar diretamente
.ts ou .vue
import {
useUserStore } from '@/store/user'
const store = useUserStore()
store.userInfo = obj // obj 指新值
Método 2: modificar com ações
.ts ou .vue
import {
useUserStore } from '@/store/user'
const store = useUserStore()
store.SetUserInfo(obj) // obj 指新值
Método 3: modificação de vários atributos
loja/usuário.ts
import {
defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
name: null,
age: null,
sex: null,
}),
})
Os métodos acima são usados para modificar um único atributo. Se você precisar modificar vários atributos ao mesmo tempo, embora possa repetir o método acima, pinia fornece novos métodos, e eu prefiro usar o método oficialmente recomendado.
.ts ou .vue
import {
useUserStore } from '@/store/user'
const store = useUserStore()
// 你可以这样去修改（不建议）
store.name = '张三'
store.age = 24
store.sex = '男'
// 推荐使用下面这种方式 √
store.$patch({
name: '张三',
age: 24,
sex: '男',
})
É claro que existem mais cenários e métodos para modificar dados do que esses. Algumas modificações complexas de dados são difíceis de conseguir dependendo apenas deles. No entanto, o objetivo deste artigo é explicar brevemente o uso piniade .
3. Armazenamento persistente
piniaAssim como vuex, os dados têm vida curta. Assim que a página for atualizada, os dados serão restaurados ao seu estado inicial. Para evitar esse problema, um método de salvamento persistente pode ser usado.
O princípio do salvamento persistente é que piniaquando os dados são atualizados, eles são salvos em localStorageou sessionStoragede forma síncrona. Após a atualização, os dados são lidos do armazenamento local. Você pode optar por gravá-los sozinho, mas não é tão fácil de implementar como imaginado. Claro, não é tão difícil.
Recomendo usar plug-ins para implementar armazenamento persistente, que é mais conveniente e economiza tempo e esforço. O plug-in recomendado é pinia-plugin-persist . Claro, definitivamente há mais de um plug-in que implementa armazenamento persistente. Não importa se você deseja usar outros. Este artigo explica apenas como usar este plug-in -em.
1. Instale o plug-in
yarn add pinia-plugin-persist
# 或者使用 npm
npm install pinia-plugin-persist
2. Introduzir plug-ins
Assim como a introdução do pinia, main.tsele é introduzido no .
mian.ts
import {
createApp } from 'vue'
import App from './App.vue'
import {
createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)
createApp(App).use(pinia).mount('#app')
3. Use plug-ins
Método 1: Salvar por padrão
O método de gravação a seguir persistirá todos os dados do módulo atual. Por padrão, eles serão salvos em sessionStorage, keyque é o módulo id. Não há necessidade de ler manualmente os dados ao atualizar a página, o plug-in irá lê-los automaticamente .
loja/usuário.ts
import {
defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
name: null,
age: null,
sex: null,
}),
persist: {
enabled: true // true 表示开启持久化保存
}
})
Método 2: definir chave e especificar o conteúdo salvo
Você pode definir ativamente keyo nome ou especificar quais dados salvar. Por padrão, todos os dados do módulo atual serão salvos.
loja/usuário.ts
export const useUserStore = defineStore('storeUser', {
state: () => ({
name: null,
age: null,
sex: null,
}),
persist: {
enabled: true,
strategies: [
{
key: 'user',
storage: localStorage,
paths: ['name']
},
],
},
})
Você pode até configurar diferentes métodos de armazenamento local para dados diferentes.
loja/usuário.ts
export const useUserStore = defineStore('storeUser', {
state: () => ({
name: null,
age: null,
sex: null,
}),
persist: {
enabled: true,
strategies: [
{
storage: sessionStorage, paths: ['name'] },
{
storage: localStorage, paths: ['age'] },
],
},
})
Método 3: Salvar no cookie
cookieClaro, também é possível salvar em , mas você precisa adicionar manualmente cookieo método de salvamento. Da mesma forma, é recomendado usar o plug-in js-cookie aqui para concluir.
npm install js-cookie
loja/usuário.ts
import Cookies from 'js-cookie'
const cookiesStorage: Storage = {
setItem (key, state) {
return Cookies.set(key, state.accessToken, {
expires: 3 }) // 设置有效期 3 天，不设置默认同 sessionStorage 有效期一致
},
getItem (key) {
return JSON.stringify({
accessToken: Cookies.get(key),
})
},
}
export const useUserStore = defineStore('storeUser', {
state: () => ({
name: null,
age: null,
sex: null,
accessToken: 'xxxxxxxxx',
}),
persist: {
enabled: true,
strategies: [
{
storage: cookiesStorage,
paths: ['accessToken'] // cookie 一般用来保存 token
},
],
},
})
O artigo termina aqui. Se houver algo que o autor precise acrescentar ou corrigir, deixe uma mensagem na área de comentários.
FIM