предисловие

Pinia.js — это менеджер состояний нового поколения, разработанный членами команды Vue.js, поэтому он также считается следующим поколением Vuex, а именно Vuex5.x, а также пользуется большим уважением за использование в Vue3.0. проекты.

Pinia.js имеет следующие особенности:

• полная поддержка машинописного текста;
• Достаточно легкий, сжатый объем всего 1,6кб;
• Удалить мутации, только состояние, геттеры, действия (это одна из моих любимых фич);
• действия поддерживают синхронные и асинхронные;
• Нет вложенности модулей, только концепция хранилища, которую можно свободно использовать между хранилищами и лучшее разделение кода;
• Нет необходимости добавлять магазин вручную, магазин будет добавлен автоматически после создания;

Установить

npm install pinia --save

Создать магазин

Создайте новый каталог src/store и создайте в нем index.ts, экспортируйте хранилище

// src/store/index.ts

import { createPinia } from 'pinia'

const store = createPinia()

export default store

Импортировано и используется в main.ts.

// src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)

State

Определить состояние

Создайте user.ts в src/store

//src/store/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user', // id必填，且需要唯一
  state: () => {
    return {
      name: '张三'
    }
  }
})

получить состояние

<template>
  <div>{{ userStore.name }}</div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
</script>

Его также можно получить в сочетании с вычислением.

const name = computed(() => userStore.name)

Состояние также может использовать деструктуризацию, но деструктуризация сделает его невосприимчивым.storeToRefs.

import { storeToRefs } from 'pinia'
const { name } = storeToRefs(userStore)

изменить состояние

Это может напрямую изменить состояние следующим образом

userStore.name = '李四'

Однако, как правило, это не рекомендуется, рекомендуется изменять состояние с помощью действий, к которым можно получить доступ непосредственно через this.

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '张三'
    }
  },
  actions: {
    updateName(name) {
      this.name = name
    }
  }
})

<script lang="ts" setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
userStore.updateName('李四')
</script>

Getters

export const useUserStore = defineStore({
 id: 'user',
 state: () => {
   return {
     name: '张三'
   }
 },
 getters: {
   fullName: (state) => {
     return state.name + '丰'
   }
 }
})

userStore.fullName // 张三丰

Actions

асинхронное действие

Действие может поддерживать асинхронный/ожидающий синтаксис, например, написание простой функции, что позволяет вам легко справляться со сценариями асинхронной обработки.

export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      return data
    }
  }
})

звонить друг другу между действиями

Взаимные вызовы между действиями могут быть доступны непосредственно с помощью this.

 export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      this.setData(data) // 调用另一个 action 的方法
      return data
    },
    setData(data) {
      console.log(data)
    }
  }
})

Также относительно просто вызывать действия в других хранилищах в действиях, после введения соответствующего хранилища можно получить доступ к его внутренним методам.

// src/store/user.ts

import { useAppStore } from './app'
export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      const appStore = useAppStore()
      appStore.setData(data) // 调用 app store 里的 action 方法
      return data
    }
  }
})

// src/store/app.ts

export const useAppStore = defineStore({
  id: 'app',
  actions: {
    setData(data) {
      console.log(data)
    }
  }
})

сохранение данных

Плагин pinia-plugin-persist может помочь в реализации постоянства данных.

Установить

npm i pinia-plugin-persist --save

использовать

// src/store/index.ts

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

Затем включите сохранение в соответствующем магазине.

export const useUserStore = defineStore({
  id: 'user',

  state: () => {
    return {
      name: '张三'
    }
  },
  
  // 开启数据缓存
  persist: {
    enabled: true
  }
})

Данные по умолчанию хранятся в sessionStorage, а в качестве ключа используется id хранилища.

пользовательский ключ

Вы также можете настроить значение ключа в стратегиях и изменить место хранения с sessionStorage на localStorage.

persist: {
  enabled: true,
  strategies: [
    {
      key: 'my_user',
      storage: localStorage,
    }
  ]
}

Постоянная часть государства

По умолчанию все состояние будет кэшироваться, вы можете указать поля, которые будут сохраняться через пути, другие не будут сохраняться.

state: () => {
  return {
    name: '张三',
    age: 18,
    gender: '男'
  }  
},

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}

Выше мы сохраняем только имя и возраст и меняем их на localStorage, в то время как пол не будет сохраняться.Если его состояние будет отправлено на изменение, оно будет потеряно при обновлении страницы и вернется в исходное состояние, а имя и возраста не будет.

наконец

Выше приведены некоторые сведения об использовании Pinia.js. Контент Pinia.js гораздо больше, чем это. Дополнительный контент и способы использования необходимо изучить самостоятельно.Документация Пиниа

благодарный

Этот обмен окончен здесь. Спасибо за прочтение. Если эта статья была вам полезна, не забудьте поставить палец вверх ❤️.

Если в этой статье есть какие-либо ошибки или недостатки, пожалуйста, исправьте меня в комментариях!