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: string
  age: number
  isAdmin: 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: {
    // 同步 action
    addUser(user: string) {
      this.users.push(user)
    },
    // 异步 action
    async 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 }
})