vue3.0 +TypeScript 项目中pinia基础语法和使用

场景是采用vite搭建的vue3.0+ts项目，官方更推荐使用pinia这个状态管理工具，现在就开始学习记录一下

安装：

npm install pinia  //下载安装

引入：在main.ts中全局引入：

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')

定义store文件夹再定义index.ts入口文件

state： 定义store的初始状态，也就是数据类似vue2中的data

import { defineStore } from 'pinia'
interface UserState {name: stringage: numberisAdmin: boolean
}
export const useUserStore = defineStore('user', {state: (): UserState => ({name: 'Alice',age: 25,isAdmin: false})
})
// 页面使用
import { useUserStore } from '@/stores/user'
const store = useUserStore()
console.log(store.name) // "Alice"

getters：类似于computer计算属性，

可以通过this去访问store实例，包括函数和初始值

export const useUserStore = defineStore('user', {state: () => ({name: 'Alice',age: 25}),getters: {isAdult(): boolean {return this.age >= 18},}
})
// 页面使用
const store = useUserStore()
console.log(store.isAdult) // true

actions：可以进行同步或异步的操作

可以通过this去访问store实例，包括函数和初始值

export const useUserStore = defineStore('user', {state: () => ({users: [] ,}),actions: {// 同步 actionaddUser(user: string) {this.users.push(user)},// 异步 actionasync fetchUsers() {try {const response = await api.getUsers()this.users = response.data} catch (error) {console.error('Failed to fetch users:', error)}},}
})
// 页面使用
const store = useUserStore()
store.addUser('1314')

id：用于store的唯一标识

// 在 defineStore 的第一个参数中定义
export const useUserStore = defineStore('user', {// ...
})

$符号：store中内置的属性和方法

$patch：批量修改state中的值

store.$patch({name: 'Bob',age: 30
})
// 或使用函数形式进行批量修改state
store.$patch((state) => {state.items.push({ id: 1 })state.hasChanged = true
})

$reset：重置 state 为初始值

store.$reset()

$subscribe：订阅 state 变化

store.$subscribe((mutation, state) => {console.log('State changed:', mutation.type, state)
})

$state：访问整个 state 对象

console.log(store.$state)

组合式 Store 语法：类似vue中的写法

export const useCounterStore = defineStore('counter', () => {const count = ref(0)const name = ref('Eduardo')const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return { count, name, doubleCount, increment }
})