pinia在vue3中的使用

1. 下载pinia

   yarn add pinia

2. 导入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')

3. 定义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 }
         })

4. 使用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>

原文地址：https://blog.csdn.net/weixin_38441229/article/details/142352906

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！