【Vue】3-Vue 3.3 新特性 & Pinia

在Vue 3.3中，最主要的新特性是Composition API的稳定版发布，以及与TypeScript的更好的集成。

Pinia是Vue.js的状态管理库，它是Vuex和Redux的替代品，旨在提供更简单、更直观的API。

以下是一个简单的Pinia store的示例：

// store.js
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
  },
})

在Vue组件中使用Pinia store：

<template>
  <div>{{ counter }} - <button @click="increment">Increment</button></div>
</template>
 
<script>
import { useMainStore } from './store'
 
export default {
  setup() {
    const mainStore = useMainStore()
    return {
      counter: mainStore.counter,
      increment: mainStore.increment,
    }
  },
}
</script>

在这个例子中，我们创建了一个名为main的store，它包含一个状态counter和一个动作increment。在Vue组件中，我们通过setup函数使用useMainStore函数来访问store中的状态和动作。