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

2022-07-26 16:34:29

上一篇我们讲了数据的请求获取. 这一篇我们讲一下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

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

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2022 zhmzjl.com | by: KAPO