Pinia 详细学习笔记

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

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

// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Counter',
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    // 使用 this 访问其他 getter（需明确返回值类型，否则 TS 推导出错）
    doublePlusOne(): number {
      return this.doubleCount + 1
    },
  },
  actions: {
    increment() {
      this.count++
    },
    async fetchAndSetCount(url: string) {
      const res = await fetch(url)
      const data = await res.json()
      this.count = data.value
    },
  },
})

// stores/counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Counter')

  const doubleCount = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  async function fetchAndSetCount(url: string) {
    const res = await fetch(url)
    const data = await res.json()
    count.value = data.value
  }

  return { count, name, doubleCount, increment, fetchAndSetCount }
})

import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

// 直接读写
console.log(counter.count)
counter.count++

import { storeToRefs } from 'pinia'
const { count, name } = storeToRefs(counter)
// count 是 Ref<number>，name 是 Ref<string>

counter.$reset() // 将 state 重置为初始值

// 在 setup store 内手动提供 $reset
const initialState = { count: 0, name: 'Counter' } // 或用函数返回
const count = ref(initialState.count)
...
function $reset() {
  count.value = initialState.count
  name.value = initialState.name
}
return { count, name, $reset, ... }

counter.$patch({
  count: counter.count + 1,
  name: 'New Name',
})

// 或函数形式
counter.$patch((state) => {
  state.count++
  state.name = 'New Name'
})

counter.$state = { count: 10, name: 'Replaced' }

getters: {
  doubleCount(state) { return state.count * 2 },
  // 使用 this 访问其他 getter，但需要明确返回类型（TS限制）
  doublePlusOne(): number { return this.doubleCount + 1 },
  // 返回函数实现可传参的 getter（但不缓存）
  countMultipliedBy: (state) => (multiplier: number) => state.count * multiplier,
}

const doubleCount = computed(() => count.value * 2)
// 可传参
const multiplied = computed(() => (m: number) => count.value * m)

actions: {
  async fetchData() {
    this.loading = true
    try {
      const data = await api.get('/data')
      this.data = data
    } finally {
      this.loading = false
    }
  },
  // 调用其他 action
  async init() {
    await this.fetchData()
  }
}

const store = useCounterStore()
store.increment()

const { increment } = store
increment() // 正常运作

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const name = ref('Alice')
  return { name }
})

// stores/cart.ts
import { useUserStore } from './user'

export const useCartStore = defineStore('cart', () => {
  const user = useUserStore() // 直接在 setup 内调用
  const items = ref([])

  function addItem(item) {
    items.value.push({ ...item, addedBy: user.name })
  }

  return { items, addItem }
})

import { useUserStore } from './user'

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: {
    addItem(item) {
      const user = useUserStore() // 在 action 内部调用
      this.items.push({ ...item, addedBy: user.name })
    },
  },
})

// plugins/myPlugin.ts
import { PiniaPluginContext } from 'pinia'

export function myPiniaPlugin(context: PiniaPluginContext) {
  // context: { app, pinia, store, options }
  const { store } = context

  // 添加全局属性
  store.$myGlobal = 'Hello'

  // 监听 action
  store.$onAction(({ name, store, args, after, onError }) => {
    console.log(`Action ${name} started`)
    after(() => console.log(`Action ${name} finished`))
    onError((error) => console.error(`Action ${name} failed`, error))
  })

  // 添加持久化逻辑（简易版）
  const savedState = localStorage.getItem(store.$id)
  if (savedState) {
    store.$patch(JSON.parse(savedState))
  }
  store.$subscribe((mutation, state) => {
    localStorage.setItem(store.$id, JSON.stringify(state))
  })
}

const pinia = createPinia()
pinia.use(myPiniaPlugin)
app.use(pinia)

// server.ts
import { createPinia } from 'pinia'
import { createSSRApp } from 'vue'

export function createApp() {
  const app = createSSRApp(App)
  const pinia = createPinia()
  app.use(pinia)
  return { app, pinia }
}

// 请求处理
async function render(url, manifest) {
  const { app, pinia } = createApp()
  // 设置当前请求的 router 等
  // 渲染前可预先填充数据
  const store = useSomeStore(pinia) // 传入 pinia 实例确保在正确实例上操作
  await store.fetchData()
  // 序列化状态
  const state = JSON.stringify(pinia.state.value)
  // 渲染并将状态注入到 HTML 中
}

// entry-client.ts
const { app, pinia } = createApp()
if (window.__PINIA_STATE__) {
  pinia.state.value = JSON.parse(window.__PINIA_STATE__)
}
app.mount('#app')