Pinia状态管理

目前Vuex已经不推荐使用，4.x是最后一版，已经不会有新版本，Pinia实际就是Vuex 5，因此推荐使用Pinia作为状态管理，其实Pinia使用比Vuex要简单。实际已经在生成项目的时候已经是集成了Pinia。

地址：https://pinia.vuejs.org/zh/introduction.html

Pinia简单对比Vuex

这里简单对比一下Pinia和Vuex，实现的功能都一样，就是全局的状态数据共享，Pinia简化了以前使用Vuex的一些重复的多余的步骤，简化状态管理

安装使用

import { createPinia } from 'pinia'
import App from '@/App.vue'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)

Pinia基本使用

Pinia支持选项式API和组合式API，因为Vue3通常都是用组合式API，因此使用Pinia的时候也考虑用组合式API

Store定义

组合式API相对简单：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { GlobalLayoutMode, GlobalLocales } from '@/consts/GlobalConstants'
import { changeMessages } from '@/messages'

export const useGlobalConfigStore = defineStore('globalConfig', () => {
  const currentLocale = ref(GlobalLocales.CN)
  const layoutMode = ref(GlobalLayoutMode.LEFT)
  return {
    currentLocale,
    layoutMode,
    changeLocale (locale) {
      if (Object.values(GlobalLocales).includes(locale)) {
        currentLocale.value = locale
      } else {
        throw new Error(`Locale ${locale} is not supported.`)
      }
      changeMessages(locale)
    },
    changeLayout (layout) {
      if (Object.values(GlobalLayoutMode).includes(layout)) {
        layoutMode.value = layout
      } else {
        throw new Error(`Layout ${layout} is not supported.`)
      }
    }
  }
})

Store使用

在Vue组件中使用比较简单，直接import 并结构出store的定义方法，然后就可以直接使用里面的state和action方法

<script setup>
import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
import { $changeLocale, elementLocale, $i18nBundle } from '@/messages'

const globalConfigStore = useGlobalConfigStore()
$changeLocale(globalConfigStore.currentLocale)
</script>

<template>
  <el-config-provider :locale="elementLocale.localeData">
    <router-view />
  </el-config-provider>
</template>

<style scoped>
</style>

集成持久化

通常情况下我们还会把一些状态存储到localStorage，不然刷新页面或者再次进入页面就会丢失状态，比如主题样式，语言、登录信息等

安装插件：npm i pinia-plugin-persistedstate

// 注册插件
import { createPinia } from 'pinia'
import App from '@/App.vue'
import piniaPluginPersistedState from 'pinia-plugin-persistedstate'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedState)
app.use(pinia)

然后在定义store的时候加上：

{
  persist: true
}

最终开源地址：

https://github.com/fugary/simple-element-plus-template