vue3 pinia 的使用

什么是pinia

        官网地址：介绍 | Pinia 中文文档

pinia和vuex的区别

	pinia	vuex
写法	选项式 组合式	选项式 组合式
模块化	没有	有
ts	支持	不支持
体积	小	大
持久化插件	pinia-plugin-persistedstate	vuex-persist、vuex-along

pinia的使用

        安装        

yarn add pinia
# 或者使用 npm
npm install pinia

        配置  需要在main.ts文件中导入createPinia函数并将Pinia插件与Vue应用程序绑定

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);

const pinia = createPinia();
app.use(pinia);

app.mount('#app');

       选项式写法

        创建仓库

import { defineStore } from 'pinia'
import piniaPersistConfig from '@/store/config/piniaPersist'

//对defineStore返回值的命名规范 一般以use开头 以Store 结束
//state 存储数据  action定义方法 getters 计算属性
export const useTabsStore = defineStore({
  id: 'xxxxxx', //仓库的名字
  state: (): TabsState => ({
    tabsMenuList: [],
    counter: 1,
  }),
  actions: {
    addTabs() {},
  },
  getters: {
  	counterPar(){
  		return this.counter + 100;
  }
  //数据持久化 persist: true相当于persist: { storage: localStorage}
  persist: true
})

        使用仓库

import { useTabsStore } from '../../../store/modules/tabs'


// 注意：如果将store中的数据解构出来会失去响应式 需要使用storeRefs保持响应式


const tabStore = useTabsStore()

const tabsMenuList = computed(() => tabStore.tabsMenuList) //使用仓库的数据


tabStore.addTab()  //使用仓库的方法




<el-tab-pane v-for="item in tabsMenuList" :key="item.path"></el-tab-pane>

  组合式api写法 创建仓库

//创建用户相关的小仓库
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore(
  'User', //仓库的名字
  () => {
    //state
    const name = ref<string>('')
    
    //定义方法
    const userLogin = async (data: loginFormData) => {
     
    }

    
//最后记得要将数据return出去
    return {
      name,
      userLogin
    }
  },
   //数据持久化 persist: true相当于persist: { storage: localStorage}
  {
    persist: true,
  },
)

使用仓库 和 选项式写法的使用仓库一致

数据持久化  pinia-plugin-persistedstate

安装 

yarn add pinia-plugin-persistedstate
# 或者使用 npm
npm install pinia-plugin-persistedstate

配置 在store文件中创建config-->piniaPersist.ts

import { PersistedStateOptions } from 'pinia-plugin-persistedstate'

/**
 * @description pinia 持久化参数配置
 * @param {String} key 存储到持久化的 name
 * @param {Array} paths 需要持久化的 state name
 * @return persist
 * */
const piniaPersistConfig = (key: string, paths?: string[]) => {
  const persist: PersistedStateOptions = {
    key, //存入本地的key
    storage: window.localStorage, //存在哪
    // storage: sessionStorage, 
    paths, //state 中的字段名，按组打包储存
  }
  return persist
}

export default piniaPersistConfig

然后在main.ts中注册成插件

import piniaPersistConfig from '@/store/config/piniaPersist'

pinia.use(piniaPersistConfig)
app.use(pinia)

使用piniaPersistConfig(位置就写在 上面的 选项式和组合式创建仓库的代码中的数据持久化处)

{
    persist: piniaPersistConfig('doctor-users'),
  },

注意：持久化插件是自动存储和读取本地的数据  如果在需要清楚本地的数据，封装移除本地数据的方法即可