Nuxt3 状态管理 useState && pinia

原创

KID.

发布于 2023-11-01 07:34:45

2.2K0

文章被收录于专栏：Coooooooooode！（前端）Coooooooooode！（前端）

useState

Nuxt3 封装了useState 可以用作简单的状态管理，直接定义，修改value值后，其他页面就可以同步修改状态

举个栗子

网页国际化需要切换语言

<!-- 定义时 -->
<script setup>
const lang = useState('lang',()=>'zh-cn')
</script>


<!-- 使用时 在其他页面 -->
<script setup>
const lang = useState('lang')
console.log(lang.value)
</script>

为了防止页面内定义遇到重复交叉的问题可以放到 composables统一管理.

composables里的ts内容会默认为公共方法

|- composables
    |-- useLang.ts

这里内容修改后是只能在客户端记录状态的，如果想在服务端同样保留状态可以结合useCookie来使用

useLang.ts

// 读取内容
export const useLang = () => {
  const lang = useCookie('lang') 
  lang.value = lang.value || 'zh-cn'
  console.log(lang)
  return useState('lang', () => lang.value)
}

lang.vue

 const lang = useLang()
 // 改变lang值
 const handleChange = () => {
   const cookieLang = useCookie('lang') 
    cookieLang.value = lang.value
 }

pinia

做过多的状态管理可以使用pinia pinia配合nuxt3使用的官方文档

安装

npm install pinia @pinia/nuxt

nuxt.config.js配置pinia就可以使用了

export default defineNuxtConfig({
  // ... 其他配置
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

使用

|- store
    |-- useLangStore.ts // pinia 推荐用use开头命名

useLangStore.ts 这里使用的是setup写法，也可以用option的写法

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

export const useLangStore = defineStore(
  'lang',  // 唯一名称
  () => {
    const lang = ref('zh-cn')
    const change = (value: string) => {
      lang.value = value
    }
    return { lang, change }
  },
  //   状态持久化，传入参数
  { persist: true }
)

页面中使用时

import { useLangStore } from '../store/useLangStore'
const store = useLangStore()
// 此时 store.lang.value 就是我们设置的值，也可以通过修改来直接修改lang的值。

@pinia-plugin-persistedstate/nuxt

pinia-plugin-persistedstate/nuxt文档地址

{ persist: true }传入的地三个参数可以用于pinia状态持久化。使用的是 @pinia-plugin-persistedstate/nuxt插件。可以自动将内容存入cookie 在 Nuxt3 中只有cookie时可以服务端和客户端都能获取到的

npm i -D @pinia-plugin-persistedstate/nuxt

nuxt.config.js

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],
})

在pinia中使用，option写法中配置persist: true。setup写法中像上文中一样在第三个参数传入

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: true,
})

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

nuxt.js