Vue3 + Pinia快速上手

一、安装

npm install pinia

二、基本使用

1. main.ts中引入pinia

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

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

2. 创建/store/index.ts文件并导入pinia (setup模式)

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

export const mainStore = defineStore(
  'main',
  () => {
    const count = ref<number>(1)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  }
)

3. 在页面中引入使用

<script setup lang="ts">
import { mainStore } from '@/store/index'
// sotre对象
const store = mainStore()
</script>

<template>
  <button @click="store.increment">
    {{ store.count }}
  </button>
</template>

三、数据持久化

每次刷新后store中的数据会被清除，此时可以将store中的数据保存到sessionStorage中，这样每次刷新store会自动读取sessionStorage中的数据以解决数据丢失的问题

1. 安装pinia-plugin-persist插件

npm install pinia-plugin-persist

2. main.ts中注册插件

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

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

const app = createApp(App)
app.use(pinia)
app.mount('#app')

3. /store/index.ts文件中使用插件

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

export const mainStore = defineStore(
  'main',
  () => {
    const count = ref<number>(1)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  },
  {
    persist: { enabled: true }
  }
)