vue3+vite+setup语法糖+pinia持久化

 一、首先创建三个store

 1、创建numStore定义state及方法，配置本地持久化

// src/store/numStore.ts
import { ref } from 'vue'
import { defineStore } from 'pinia'

// 使用setup模式定义
export const useNumStore = defineStore(
	'numStore',
	() => {
		const count = ref<number>(1)
		function increment() {
			count.value++
		}
		function doubleCount() {
			return count.value * 2
		}
		return { count, increment, doubleCount }
	},
	{
		persist: {
			enabled: true,
			strategies: [
				{
					key: 'count',
					storage: localStorage //可以选择对应的存储形式（localStorage或者sessionStroage）
				}
			]
		}
	}
)

2、创建userStore

// src/store/userStore.ts

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

// 使用setup模式定义
export const useUserStore = defineStore('userStore', () => {
	const user = ref<string>('张三')
	function changeUser() {
		user.value = `李四` + Math.random()
	}

	return { user, changeUser }
})

 3、创建skillStore

//src\store\skillStore.ts
import { ref } from 'vue'
import { defineStore } from 'pinia'

// 使用setup模式定义
export const useSkillStore = defineStore('skillStore', () => {
	const mark = ref<string>('普通攻击')
	function changeMark() {
		mark.value += '技能加1'
	}

	return { mark, changeMark }
})

二、在src/store目录下创建一个入口index.ts，其中包含一个注册函数registerStore()，其作用是把整个项目的store都提前注册好，最后把所有的store实例挂到appStore透传出去。这样以后，只要我们在项目任何组件要使用pinia时，只要import appStore进来，取对应的store实例就行。

// src/store/index.ts
import { useSkillStore } from './skillStore'
import { useUserStore } from './userStore'
import { useNumStore } from './numStore'

const appStore: any = {}

/**
 * 注册app状态库
 */
export const registerStore = () => {
	appStore.skillStore = useSkillStore()
	appStore.numStore = useNumStore()
	appStore.userStore = useUserStore()
}

export default appStore

 三、在src/main.ts挂载注册

 

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

//如果使用持久化
import piniaPersist from 'pinia-plugin-persist'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPersist)
app.use(pinia)
registerStore()

四、为了让appStore实例与项目解耦，在构建时要把appStore抽取到公共chunk，在vite.config.ts做如下配置

export default defineConfig(({ command }: ConfigEnv) => {
  return {
   
      rollupOptions: {
        output: {
          manualChunks(id) {
            // 将pinia的全局库实例打包进vendor，避免和页面一起打包造成资源重复引入
            if (id.includes(path.resolve(__dirname, '/src/store/index.ts'))) {
              return 'vendor';
            }
          }
        }
      }
    }
  };
});

 五、组件内使用

storeToRefs为了保持响应式

//src\views\testdemo.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import appStore from '../store/index'

// setup composition API模式
const { count } = storeToRefs(appStore.numStore)
const { increment, doubleCount } = appStore.numStore
const { user } = storeToRefs(appStore.userStore)
const { changeUser } = appStore.userStore
const { mark } = storeToRefs(appStore.skillStore)
const { changeMark } = appStore.skillStore
</script>
<template>
	<div class="box-styl">
		<h1>Setup模式</h1>
		<p class="section-box">
			Pinia的state: count = <b>{{ count }}</b>
		</p>
		<p class="section-box">
			Pinia的getters: doubleCount() = <b>{{ doubleCount() }}</b>
		</p>
		<div class="section-box">
			<p>Pinia的action: increment()</p>
			<button @click="increment">点我</button>
		</div>
	</div>
	<div class="box-styl">
		<p class="section-box">
			Pinia的state: user = <b>{{ user }}</b>
		</p>
		<div class="section-box">
			<p>Pinia的action: changeUser()</p>
			<button @click="changeUser">点我</button>
		</div>
	</div>
	<div class="box-styl">
		<p class="section-box">
			Pinia的state: mark = <b>{{ mark }}</b>
		</p>
		<div class="section-box">
			<p>Pinia的action: changeMark()</p>
			<button @click="changeMark">点我</button>
		</div>
	</div>
</template>