useState
Nuxt3 封装了useState 可以用作简单的状态管理，直接定义，修改value值后，其他页面就可以同步修改状态
举个栗子
网页国际化 需要切换语言
代码语言：txt复制<!-- 定义时 -->
<script setup>
const lang = useState('lang',()=>'zh-cn')
</script>
<!-- 使用时 在其他页面 -->
<script setup>
const lang = useState('lang')
console.log(lang.value)
</script>为了防止页面内定义遇到重复交叉的问题可以放到 composables统一管理.
composables里的ts内容会默认为公共方法
代码语言：txt复制|- 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使用的官方文档
安装
代码语言：txt复制npm install pinia @pinia/nuxtnuxt.config.js配置pinia就可以使用了
export default defineNuxtConfig({
// ... 其他配置
modules: [
// ...
'@pinia/nuxt',
],
})使用
代码语言：txt复制|- 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 }
)页面中使用时
代码语言：txt复制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/nuxtnuxt.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,
})
