Vue3中pinia用法示例

npm install 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')

// store.js
import { 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>

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

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

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

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

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

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

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

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