vue3+pinia

Question

第一次进入页面里面没有数据！但左侧的模块数据却渲染出来了，只有从新后退再点进去一次页面才会完整的渲染出来，但其他页面并不会这样。求回复！！看了一天了

Answer 1

【相关推荐】

• 请看👉 ：vue3中 pinia 的使用方法
• 除此之外, 这篇博客: Vue3 - Pinia 状态管理（环境搭建安装及各属性使用教程）详细使用教程中的 getters 属性 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  前面我们学习了如何搭建状态管理及读取数据，实际上即为 state 属性。

  这块学习 getters 属性，我们打开编辑器，来简单体验一下。

  先打开 index.js ，把前面写的代码，改造一下。

  // 通过 pinia 提供的 defineStore 接口来创建一个状态管理实例
  import { defineStore } from 'pinia'
  
  // 第一个参数: 容器的ID(必须唯一) 后面Pinia会把所有的容器挂载到根容器
  // 第二个参数：选项配置对象, state / getter / action
  // 返回值：一个函数, 调用即可得到状态管理容器实例
  export const store = defineStore('main', {
      // 这块vue2中是一个对象,但在这里必须是一个函数(箭头函数)
      // 为什么必须是函数呢? 在服务端渲染的时候避免交叉请求导致的数据状态污染
      // 那又为什么是箭头函数呢? 为了TypeScript更好的类型推导
      // 另外也可以这么写: state: () => ({...})
      state: () => {
          return {
              num: 10
          }
      },
  
      // 其实这个就相当于组件中的 computed 计算属性
      // 也就是具有缓存的功能
      getters: {
          // 获取num*2的结果
          // 参数: state状态对象(看上面)
          getResult(state) {
              return state.num *= 2
          }
      },
      actions: {}
  })
  

  然后随便找个页面，获取测试一下。

  <template>
    <h1>
      {{ vuex.getResult }}
    </h1>
  </template>
  
  <!--
    setup语法糖(组件无需注册/数据和方法无需return/不用写setup()/...)
  -->
  <script setup>
  import { store } from './store/index.js'
  const vuex = store()
  // Proxy
  console.log(vuex)
  </script>
  

  

  可以看到，成功了，非常简单。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^