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