Vue3中使用pinia

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

1. 安装Pinia：

   npm install pinia
   

2. 创建和配置Pinia存储：

   // main.js
   
   import { 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.js
   
   import { 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()来执行相应的操作。