Nuxt3项目实战篇7——组件间的通信，useState和useCookie的使用

上一篇我们讲了数据的请求获取. 这一篇我们讲一下Nuxt3中的数据的存储与攻下那个。首先，位于components文件夹下的组件是自动导入的. 然后，Nuxt3本来就是基于Vue3开发，所以传值方式可以直接跟vue3就对了.

const props = defineProps({
  menuData: {
    type: Array, 
    required: true,
    default: () => [],
  }, 
})

一、Vue3 watch 侦听 props 的变化

watch 有两种写法

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

如果我们想侦听 props 上的属性变化，需要采用第一种写法

watch(
  () => props.name,
  (count, prevCount) => {
    /* ... */
  }
)

// 下面的写法不会被触发
watch(props.name, (count, prevCount) => {
  /* ... */
})

二、useState

Nuxt3不再集成Vuex。但是Vue的官方建议是使用pinia，通过包导入到项目中。 如果是大型项目中，建议使用pinia, 如果只是简单的存储信息，Nuxt3自带的useState足矣。

nuxt3 怎么实现store功能, 首先看问文档State Management

若想要组件间共享状态，可以利用Nuxt3的composables自动导入属性，把它们定义在composables目录中，这样他们将成为全局类型安全的状态。Nuxt3的useState怎么使用

// 新建composables/state.ts，composables下的文件会自动导入，页面中可以直接使用
//useState 的第一参数为 key，第二参数为 function.

import { useState, useCookie } from "nuxt/app";

//示例：（使用命名导出）
export const userLangeages = () => {
  const langages = useCookie('lang')
  langages.value = langages.value || 'cn'
  return useState('userLang', () => langages.value)
}

页面上调用与修改

//获取state的值
const userlang = userLangeages ()

//修改
userlang.value = newValue

useState：nuxt3 内置useState实现状态共享，实现服务端和客户端的共享，有一定风险：内存泄漏，数据泄漏

三、useCookie

妈妈再也不用担心我使用cookie了，之前用cookie,需要引入插件js-cookie, 但是nuxt3自带了cookie, 虽然我们已经用熟了js-cookie， 但是我们没有必要为了一个简单的功能引入一个额外的插件，徒增开销.cookie的获取，修改与删除的方法

// get Cookie
const Cookies = useCookie('lang', {
  maxAge: 1000 * 60
})
// Set Cookie
Cookies.value = Cookies.value || 'cn'

// Delete Cookie
cookie.value = undefined
// or
cookie.value = null

码字不易， 记得关注+收藏哦。 如果要转载，请标明出处。