龙空技术网

vue3.2 中pinia的详细存数据和取数据的使用方法

NativeBase 147

前言:

此刻小伙伴们对“vue取数据”大概比较珍视,小伙伴们都需要了解一些“vue取数据”的相关资讯。那么小编也在网摘上搜集了一些有关“vue取数据””的相关资讯,希望大家能喜欢,你们快快来学习一下吧!

pinia 是 Vue3 的一个状态管理库,用于帮助开发者更高效、更简洁地管理 Vue3 组件的状态。

下面是 Pinia 中存储和获取数据的使用方法:

存储数据

要存储数据,首先需要定义一个 Pinia store,如下所示:

import { defineStore } from "pinia"export const store = defineStore({  id: "app",  state: () => ({    count: 0,    todos: []  }),  actions: {    increment() {      this.count++    },    addTodo(todo) {      this.todos.push(todo)    }  }})

上面的例子中,我们定义了一个名为 store 的 Pinia store,该 store 包含一个名为 count 的计数器和一个名为 todos 的数组。

要存储数据(即更新 counttodos),我们可以在组件中使用 store 中的 actions,如下所示:

<template>  <div>    <p>Count: {{ count }}</p>    <button @click="increment">+</button>  </div></template><script>import { useStore } from "pinia"import { store } from "./store"export default {  setup() {    const count = useStore(store)        function increment() {      count.increment()    }        return {      count,      increment    }  }}</script>

上面的例子中,我们使用了 useStorestore,来定义一个 count 将组件与 store 绑定在一起。然后我们在 increment() 方法中调用了 count 中的 increment() 方法,该方法实现了计数器的增量操作。

我们可以使用类似的方式来更新 todos 数组。例如,我们可以使用 addTodo() 方法将一个新的 todo 对象添加到 todos 数组中。

获取数据

要获取已存储的数据,我们可以使用 computed 属性或 watchEffect() 方法。例如,如果我们在组件中想要获取当前 count 的值,可以使用如下方式:

<template>  <div>    <p>Count: {{ count }}</p>    <button @click="increment">+</button>  </div></template><script>import { useStore } from "pinia"import { store } from "./store"export default {  setup() {    const count = useStore(store)    return {      count    }  }}</script>

上面的例子中,我们在 setup() 方法中使用 useStore(store) 来获取全局的 store 对象,然后通过 count 属性将 store 中的 count 状态绑定到组件中。这样,在模板中我们就可以直接使用 {{ count }} 来渲染当前的计数器值。

如果我们在组件中需要监听 count 的变化,可以使用 watchEffect() 方法来实现。例如,如果我们想要在 count 增量时触发一些其他的功能,可以使用如下方式:

<template>  <div>    <p>Count: {{ count }}</p>    <button @click="increment">+</button>  </div></template><script>import { useStore } from "pinia"import { store } from "./store"import { watchEffect } from "vue"export default {  setup() {    const count = useStore(store)        watchEffect(() => {      console.log(`Count changed to ${count.count}`)    })        function increment() {      count.increment()    }        return {      count,      increment    }  }}</script>

上面的例子中,我们使用 watchEffect() 方法来监听 count 的变化。当 count 的值发生变化时,回调函数将被触发,并输出新的

标签: #vue取数据