Vue学习笔记（Snippets、Pinia）

一、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
})