pinia使用和数据持久化（cookie）

pinia

简单使用
/store/modules/user

import { defineStore } from 'pinia'

/**
 * useStroe 可以是任意命名
 * 第一个参数是应用程序中 store 的唯一 id
 */
export const userStroe = defineStore('main', {
  // 推荐使用 完整类型推断的箭头函数
  state: () => {
 	 // 所有这些属性都将自动推断其类型
    return {
      counter: 0,
      username: 'bule'
    }
  },
  getters: {
    double(): number {
      return this.counter * 2
    }
  },
  actions: {
    getUser() {
      this.username = 'bule123'
    }
  }
})

/store/index

import { createPinia } from 'pinia'
import { userStroe } from './modules/user'
export default createPinia()
export { userStroe }

自定义store中参数的ts类型

interface UserState{
  counter:number|undefined,
  username:string|undefined
}
state: ():UserState => {
    return {
      counter: undefined,
      username: 'bule'
    }
  },

pinia持久化

官方文档：https://seb-l.github.io/pinia-plugin-persist/#vue3

npm i pinia-plugin-persist // 安装持久化存储插件

store/modules/user.ts

import { defineStore } from 'pinia'

/**
 * useStroe 可以是任意命名
 */

import Cookies from 'js-cookie'
const cookiesStorage: Storage = {
  setItem(key, state): any {
    console.log(state)
    // console.log(state.username)
    console.log(key)
    let myState = JSON.parse(state)
    return Cookies.set(key, myState[key], { expires: 3 })
  },
  getItem(key): string {
    return JSON.stringify({
      [key]: Cookies.get(key),
    })
  },
  removeItem(key) { },
  clear() { },
  key(key): any { },
  length,
}

export const userStroe = defineStore('main', {
  state: () => {
    return {
      counter: 0,
      username: 'bule'
    }
  },
  persist: {
    enabled: true,
    strategies: [
      {
        storage: cookiesStorage,
        key: 'username',
        paths: ['username']
      },
      {
        storage: cookiesStorage,
        key: 'counter',
        paths: ['counter']
      },
    ],
  },
  getters: {
    double(): number {
      return this.counter * 2
    }
  },
  actions: {
    getUser() {
      this.username = 'bule123'
    }
  }
})

store/index.ts

import type { App } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import { userStroe } from './modules/user'
const store = createPinia()
store.use(piniaPluginPersist)
export function setupStore(app: App<Element>) {
  app.use(store)
}

export default store
export { userStroe }

main.ts

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import { setupStore } from './store'
import router from './router'

const app = createApp(App)


setupStore(app)
app.use(router).mount('#app')

例子

<template>
  <div>ddddd/{{myName}}/{{store.username}}/{{store.counter}}/myCounter:{{myCounter}}</div>
  <button @click="roundClick()">随机数</button>
</template>
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { onMounted, ref } from "vue";
// import { useStore } from "vuex";
import { userStroe } from '@/store/index'
import { storeToRefs } from 'pinia'
const store = userStroe()
const myName = ref<string>('')
const myCounter = ref<number>(0)
// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { username, counter } = storeToRefs(store)
function roundClick() {
  store.$patch(state => {
    state.counter = Math.random()
  })
  // myCounter.value = store.counter
}
onMounted(() => {
  myName.value = store.username
  myCounter.value = store.counter
  store.getUser()
  // store.$patch(state => {
  //   state.username = '4444'
  //   state.counter = 9898900000
  // })
  // store.username = '123bule'
})
</script>