一、Vue3好用的VSCode插件

Vue VSCode Snippets

作用：在vue3文件中输出v3，选择模板后，可生成模板代码

自定义模板的方法：

 

 

打开vue.json,修改模板

 

 

二、Pinia

1.简介

Pinia是一个轻量级的状态管理库

 Pinia官网

       Pinia | The intuitive store for Vue.js

状态管理库是用于管理应用程序全局状态的工具

以登录为例:

使用Pinia创建一个userStore来集中管理用户的登录状态和过期时间

当用户登录成功时:

设置userStore中用户的登录状态为已登录,并设置过期时间

当用户退出登录时:

修改userStore中用户的登录状态为未登录,并删除过期时间

Pinia 和 组件通信 的区别

虽然Vue提供的父传子、子传父以及跨组件通信也可以用于状态共享,

但在大型项目中,随着组件数量的增加,会导致以下问题:

1.组件之间传递大量的props,会使项目变得非常繁琐和难以维护

2.非父子组件间过度依赖provide/inject,使状态散落在各个组件之间

2.安装 Pinia 以及定义和使用 Store

 

在main里面加入

import { createApp } from 'vue'

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'

import App from './App.vue'

//创建一个Pinia实例,用于在应用中集中管理状态(store)
const pinia = createPinia()

//createApp(App).mount('#app')
const app = createApp(App)
app.use(pinia) //将Pinia实例注册到Vue应用中
app.mount('#app')

在src目录下，新建stores文件夹，再新建web.js文件

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

/*
  定义一个基于 Pinia 的 Store
  第1个参数 web 是 useWebStore 在应用中的唯一标识符(ID)
  第2个参数是 Setup函数 或 Option对象
*/
export const useWebStore = defineStore('web', () => {
  //定义一个响应式对象，存储网站信息
  const web = reactive({
    title: "编程",
    url: "ruicode.com"
  })

  //定义一个响应式引用，存储用户数
  const users = ref(1000)
  
  //定义方法
  const userAdd = () => {
    users.value++
  }

  return {
    web,
    users,
    userAdd
  }
})

再修改App.vue

<script setup>
    import { useWebStore } from './stores/web.js'

    const webStore = useWebStore()
    
    console.log("webStore.web:",webStore.web)
    console.log("webStore.users:",webStore.users)
</script>

<template>
    {{ webStore.web.url }}

    {{ webStore.users }}

    <button @click="webStore.userAdd" >添加用户</button>
</template>

<style scoped>

</style>

3.Pinia 持久化存储插件 

1.安装插件

 2.修改mian.js

从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate

将插件添加到 pinia 实例上

import { createApp } from 'vue'

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'

//从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'

//创建一个Pinia实例,用于在应用中集中管理状态(store)
const pinia = createPinia()

//将插件添加到 pinia 实例上
pinia.use(piniaPluginPersistedstate)

//createApp(App).mount('#app')
const app = createApp(App)
app.use(pinia) //将Pinia实例注册到Vue应用中
app.mount('#app')

在web.js的Store中添加

{
  //持久化存储到 localStorage 中
  persist: true
})