27 vue3 Pinia取值

本篇记录使用pinia状态管理工具如何取值的操作

1. 进行vue3的创建 以及 pinia的安装，还不知道的请看上篇文档

目录如下：

 2. app.js中写入如下代码

import {defineStore} from "pinia"

const appStore = defineStore('appStore', {
    state: () => ({
        baseUrl: 'https://www.baidu.com/',
        appid: 'wx123456789',
        ipList: ['192.168.10.777', '192.168.10.999', '192.168.10.888']
    })
})

export default appStore

3.在任意的页面组件中写入如下代码，三种形式，随意搭配

<template>
  <div>
    <strong>store：</strong> {{ store }}
  </div>
  <div>
    <strong>baseUrl：</strong>
    {{ baseUrl }}
  </div>
  <div>
    <strong>appid：</strong>
    {{ appid }}
  </div>
  <div>
    <strong>ipList：</strong>
    {{ ipList }}
  </div>
</template>

<script>
import appStore from "@/store/app"
import {storeToRefs} from "pinia"
import {computed} from "vue"

export default {
  name: "Home",
  setup() {
    const store = appStore()
    let {appid, ipList} = storeToRefs(store) //方法3：可以利用从pinia中引用的storeToRefs方法，进行解构赋值 再return出去 类似 vue3 中的 toRefs
    console.log(store)
    return {
      store, //方法1：可以把整个store return出去
      baseUrl: computed(() => store.baseUrl),  //方法2：可以利用computed属性，将需要展示的值return出去
      appid,
      ipList
    }
  }
}
</script>

页面呈现：

下一篇：

28 vue3 Pinia修改state的三种方法(直接修改，$patch，actions)_十一月的萧邦-CSDN博客