pinia + pinia-plugin-persistedstate + 组合式API 写法

pinia是一个基于Vue 3的状态管理库，它提供了一种有效的方式来管理应用程序的状态。使用pinia，你可以定义多个store来管理不同的状态，并通过提供的API来访问和修改这些状态。

pinia-plugin-persistedstate是一个pinia的插件，它可以帮助你将store的状态持久化到本地存储中，以便在刷新页面后能够保持状态的连续性。

组合式API是Vue 3中的一个新特性，它提供了一种更好的方式来组织和重用组件逻辑。在使用pinia时，你可以使用组合式API来编写store中的逻辑，它允许你将相关的逻辑聚集在一起，并且可以更好地跟踪和管理状态。

下面是一个使用pinia和组合式API的示例：

// 定义一个store
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

// 在组件中使用store
import { useCounterStore } from './store'

export default {
  setup() {
    const counterStore = useCounterStore()

    return {
      count: counterStore.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement
    }
  }
}

在上面的例子中，我们定义了一个名为counter的store，并在其中定义了一个count状态和两个actions（increment和decrement）。在组件中，我们使用useCounterStore来获取store的实例，并通过返回的对象来访问和修改状态。