vue3(笔记)3.0 Pinia状态管理数据.持久化插件.内置vue devtools调试工具

---pinia状态管理数据(vuex升级版)

官网镜像:(https://pinia.vuejs.org/zh/core-concepts/)

安装(手动):

npm install pinia

 导入pinia:

组合式写法的格式:

使用前需要导入:

import {defineStore} from 'pinia'

                                    actions:支持了同步和异步的方法(融合了mutations)

在组件中调用:

import { useCounterStore } from '@/stores'
const counterStore = useCounterStore()

注:需要解构的话需要引入storeToRefs 

---pinia持久化插件

官网镜像(https://prazdevs.github.io/pinia-plugin-persistedstate/)

安装:

npm i pinia-plugin-persistedstate

将插件添加到您的PINIA实例： 

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

声明您的商店时，将新persist选项设置为true(组合式API放第三位):

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

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('hello pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

                                                默认:所有的都会进行持久化~

可以进行设置指定存放数据(详细看官网)

例如:

 {
    persist: {
         key: 'my-custom-key',  //修改存储的唯一标识
          pick: ['save.me']     //存储的是哪些数据
    }
  },

---Vue DevTools调试工具(内置在项目中)

官网(https://devtools.vuejs.org/getting-started/introduction)

安装:

npm add -D vite-plugin-vue-devtools

配置:

//  Configuration Vite

import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vueDevTools(),
  ],
})

---正常的项目配置文件

示例代码(store/index.js)---完成了导入pinia的操作:

但是需要在main.js中 添加   app.use(pinia)

import { createPinia } from 'pinia'
//我是持久化
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia =createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia
export * from './modules/user' //暴露数据,使外部调用方便

示例代码(store/modules/user.js):

import {defineStore} from 'pinia'
import {ref} from 'vue'
export const useUserStore = defineStore('user',()=>{
const token = ref('')
return{
    token
}
},
{
//持久化配置
    persist:true
})