Pinia 两种写法全攻略：Options 写法 vs Setup 写法

一.pinia提供两种定义Store的方式:

1.Option写法(对象配置)

// stores/user.ts
import { defineStore } from 'pinia'// 第一个参数是id 第二个个参数是配置对象
export const useUserStore = defineStore('user', {state: () => ({count: 0,}),getters: {double: (state) => state.count * 2,},actions: {increment() {this.count++},},
})

导入使用:

// 在组件里
import { useUserStore } from '@/stores/user'

const user = useUserStore()
user.increment()
console.log(user.double)

2.Setup写法(函数返回)

// stores/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'//第二个参数为函数export const useUserStore = defineStore('user', () => {const count = ref(0)const double = computed(() => count.value * 2)function increment() {count.value++}return { count, double, increment }
})