Pinia 在 Vue3 中的使用

pinia的使用

pinia是一个状态管理库，它可以帮助我们管理应用的状态，它可以帮助我们更好地组织代码，提高代码的可维护性。

安装

npm install pinia --save

基本使用

// store.js
import { defineStore } from 'pinia'


export const useStore = defineStore('counter',{
  state: () => ({
    count: 0,
    name: 'pinia'
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment(state) {
      state.count++
    }
  }
})

1. 创建一个 store.js 文件，导入 createStore 方法。

2. 使用 createStore 方法创建一个 store 对象，并传入一个配置对象。

3. 在配置对象中，我们可以定义 state、getters、actions 三个属性。

4. state 属性是一个函数，它返回一个初始状态对象。

5. getters 属性是一个对象，它包含一些计算属性。

6. actions 属性是一个对象，它包含一些修改 state 的方法。

组合式 API

pinia 提供了组合式 API，可以更方便地管理状态。

// store/modules/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useStore = defineStore('counter',() => {
  const count = ref(0)
  const name = ref('pinia')

  const doubleCount = computed(() => count.value * 2)

  const increment = () => {
    count.value++
  }

  return {
    count,
    name,
    doubleCount,
    increment
  }
})

1. 导入 ref 和 computed 方法。

2. 使用 ref 方法创建 count 和 name 变量。

3. 使用 computed 方法创建 doubleCount 计算属性。

4. 使用箭头函数创建 increment 方法。

5. 返回一个对象，包含 count、name、doubleCount、increment 四个属性。

使用 pinia

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { useStore } from './store'

const app = createApp(App)

app.use(useStore)

app.mount('#app')

1. 导入 createApp 方法。

2. 使用 createApp 方法创建一个 app 对象。

3. 使用 app.use 方法注册 pinia 实例。

4. 使用 app.mount 方法挂载 app 实例。

pinia 独立维护

// store/index.js
import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

/**
 * 仓库统一导出
 * 
 * 接受模块的按需导出
 */ 
export * from './counter'
export * from './user'

1. 导入 createPinia 方法。

2. 使用 createPinia 方法创建一个 pinia 对象。

3. 导出 pinia 对象。

4. 导出模块的按需导出。

pinia 持久化

插件 pinia-plugin-persistedstate

安装：

pnpm install pinia-plugin-persistedstate

使用：

pinia 独立维护在 store 文件夹下新建一个 index.js 文件，内容如下：

在 main.js 中引入

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

const pinia = createPinia()
pinia.use(persist)

export default pinia

// 仓库统一导出
export * from './modules/user' 

在 store 文件夹下创建 user.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

/**
 * 用户模块 token setToken removeToken
 */
export const useUserStore = defineStore(
  'big-user',
  () => {
    const token = ref('')
    const setToken = (newToken) => {
      token.value = newToken
    }
    const removeToken = () => {
      token.value = ''
    }
    return {
      token,
      setToken,
      removeToken
    }
  },
  {
    // persist: true // 持久化存储
    persist: {
      key: 'big-user', // 存储 key
      storage: localStorage, // 存储类型
      paths: ['token'], // 需要持久化的字段
    }
  }
)

持久化常用配置项

• key：存储 key。
• storage：存储类型，默认值为 localStorage。
• paths：需要持久化的字段，默认值为 []。