pinia在vue3中的使用

姚*鸿的博客2024-09-20 21:20

下载pinia

   yarn add pinia

导入pinia

javascript 复制代码

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

  ### option方式

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

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

  ### setup方式

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

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

       return { count, doubleCount, increment }
     })
     ```

使用store

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

javascript 复制代码

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

详细使用

javascript 复制代码

<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>