vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3使用pinia

Vue3中pinia用法示例

作者：一花一world

这篇文章主要介绍了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()来执行相应的操作。

到此这篇关于Vue3中pinia用法示例的文章就介绍到这了,更多相关Vue3使用pinia内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文