pinia在vue3中的使用

下载pinia

yarn add pinia

导入pinia

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

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

定义pinia

1. option方式

   1. Vue的选项式 API 类似，我们也可以传入一个带有state、actions与getters属性的Option对象。
      state是store的数据 (data)，getters是store的计算属性(computed)，而actions则是方法(methods)。

      export const useCounterStore = defineStore('counter', {
        state: () => ({ count: 0, name: 'Eduardo' }),
        getters: {
          doubleCount: (state) => state.count * 2,
        },
        actions: {
          increment() {
            this.count++
          },
        },
      })

2. setup方式

   1. ref()就是state属性，computed()就是getters，function()就是actions。

      export const useCounterStore = defineStore('counter', () => {
        const count = ref(0)
        const doubleCount = computed(() => count.value * 2)
        function increment() {
          count.value++
        }
      
        return { count, doubleCount, increment }
      })

使用store

1. vue3使用pinia，这里使用了<script setup>

   <script setup>
   import { useCounterStore } from '@/stores/counter'
   // 可以在组件中的任意位置访问 `store` 变量 ✨
   const store = useCounterStore()
   </script>

2. 详细使用

   <script setup>
   import { useCounterStore } from '@/stores/counter'
   import { computed } from 'vue'
   
   const store = useCounterStore()
   // ❌ 这将不起作用，因为它破坏了响应性
   // 这就和直接解构 `props` 一样
   const { name, doubleCount } = store
   name // 将始终是 "Eduardo"
   doubleCount // 将始终是 0
   setTimeout(() => {
     store.increment()
   }, 1000)
   // ✅ 这样写是响应式的
   // 💡 当然你也可以直接使用 `store.doubleCount`
   const doubleValue = computed(() => store.doubleCount)
   </script>