Vue3中使用pinia

在Vue 3中使用Pinia，您需要按照以下步骤进行设置：

1. 安装Pinia：

   npm install pinia
   

2. 创建和配置Pinia存储：

   // main.jsimport { createApp } from 'vue'
   import { createPinia } from 'pinia'
   import App from './App.vue'const app = createApp(App)
   const pinia = createPinia()app.use(pinia)
   app.mount('#app')
   

3. 在应用中创建和使用存储：

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

4. 在组件中使用存储：

   <!-- Counter.vue --><template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
   </template><script>
   import { defineComponent } from 'vue'
   import { useCounterStore } from './store'export default defineComponent({setup() {const counterStore = useCounterStore()return {count: counterStore.count,increment: counterStore.increment,decrement: counterStore.decrement}}
   })
   </script>
   

在上面的示例中，我们使用Pinia来创建了一个名为"counter"的存储，并在组件中使用useCounterStore()来访问该存储。通过在组件中使用setup()函数，我们可以将存储中的状态和操作绑定到组件的模板中。

这就是在Vue 3中使用Pinia的基本流程。您可以根据自己的需要创建和配置更多的存储，并在组件中使用它们。

组件使用

在Vue 3中，使用组件需要经过以下步骤：

1. 创建组件：

   <!-- MyComponent.vue --><template><div><h1>{{ title }}</h1><p>{{ message }}</p></div>
   </template><script>
   import { defineComponent } from 'vue'export default defineComponent({props: {title: {type: String,required: true},message: {type: String,default: ''}}
   })
   </script>
   

   在上面的示例中，我们创建了一个名为MyComponent的组件，它接受两个属性：title和message。

2. 在父组件中使用组件：

   <!-- ParentComponent.vue --><template><div><my-component title="Hello" message="Welcome to my app!" /></div>
   </template><script>
   import { defineComponent } from 'vue'
   import MyComponent from './MyComponent.vue'export default defineComponent({components: {MyComponent}
   })
   </script>
   

   在上面的示例中，我们在ParentComponent中使用MyComponent组件，并通过属性传递了title和message的值。

3. 渲染组件：

   <!-- App.vue --><template><div><parent-component /></div>
   </template><script>
   import { defineComponent } from 'vue'
   import ParentComponent from './ParentComponent.vue'export default defineComponent({components: {ParentComponent}
   })
   </script>
   

   在上面的示例中，我们在App组件中渲染了ParentComponent组件。

通过以上步骤，您可以在Vue 3中创建和使用组件。您可以根据需要在组件中定义属性、方法和生命周期钩子等。

store.$reset()

在Pinia中，store.$reset()是一个用于重置存储状态的方法。它将会重置存储的状态为初始值，并且会触发订阅该存储的组件重新渲染。

要使用$reset()方法，您需要先获取到存储实例，然后调用该方法。以下是一个示例：

import { useCounterStore } from './store'// 获取存储实例
const counterStore = useCounterStore()// 调用 $reset() 方法来重置存储状态
counterStore.$reset()

在上面的示例中，我们首先通过useCounterStore()获取了counter存储的实例，然后调用$reset()方法来重置存储的状态。

请注意，$reset()方法会重置存储的状态，但不会影响存储的其他配置，例如actions和getters等。如果您想要重置整个存储（包括配置），可以考虑重新创建存储实例。

Getter

在Pinia中，您可以使用getters来获取存储状态的派生值。getters是存储的一种特殊属性，它可以根据存储状态的值进行计算，返回一个派生的值。

以下是一个使用getters的示例：

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

在上面的示例中，我们定义了一个名为doubleCount的getter，它返回存储状态count的两倍。通过在getters对象中定义doubleCount函数，我们可以在组件中通过$store.doubleCount来访问这个派生值。

以下是在组件中使用getter的示例：

<template><div><p>Count: {{ $store.count }}</p><p>Double Count: {{ $store.doubleCount }}</p><button @click="$store.increment()">Increment</button></div>
</template><script>
import { defineComponent } from 'vue'
import { useCounterStore } from './store'export default defineComponent({setup() {const store = useCounterStore()return { $store: store }}
})
</script>

在上面的示例中，我们在模板中使用了$store.doubleCount来获取doubleCount的值，并在按钮的点击事件中调用了$store.increment()来增加count的值。

Actions

在Pinia中，actions用于定义存储的操作。actions是存储的一种特殊属性，它包含一组可以在组件中调用的方法。

以下是一个使用actions的示例：

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),getters: {doubleCount: (state) => {return state.count * 2}},actions: {increment() {this.count++},decrement() {this.count--},reset() {this.count = 0}}
})

在上面的示例中，我们定义了三个actions：increment、decrement和reset。这些方法可以在组件中通过$store.increment()、$store.decrement()和$store.reset()来调用。

以下是在组件中使用actions的示例：

<template><div><p>Count: {{ $store.count }}</p><p>Double Count: {{ $store.doubleCount }}</p><button @click="$store.increment()">Increment</button><button @click="$store.decrement()">Decrement</button><button @click="$store.reset()">Reset</button></div>
</template><script>
import { defineComponent } from 'vue'
import { useCounterStore } from './store'export default defineComponent({setup() {const store = useCounterStore()return { $store: store }}
})
</script>

在上面的示例中，我们在模板中使用了$store.count和$store.doubleCount来获取存储状态和派生值的值，并在按钮的点击事件中调用了$store.increment()、$store.decrement()和$store.reset()来执行相应的操作。