Vue3中使用pinia
在Vue 3中使用Pinia，您需要按照以下步骤进行设置：
-
安装Pinia：
npm install pinia -
创建和配置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') -
在应用中创建和使用存储：
// store.jsimport { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++},decrement() {this.count--}} }) -
在组件中使用存储：
<!-- 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中，使用组件需要经过以下步骤：
-
创建组件：
<!-- 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。 -
在父组件中使用组件：
<!-- 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的值。 -
渲染组件：
<!-- 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()来执行相应的操作。