在 Vue 中，如果我需要在挂载生命周期钩子时使用来自 getter 的状态怎么办？

Question

我尝试在挂载生命周期挂钩期间使用来自 vuex 的数据。但是，似乎在我从 vuex 获取数据之前执行了已安装的生命周期挂钩。如何从 vuex 访问数据并在挂载生命周期挂钩期间使用它？

代码如下

我是这样用getter带数据的

 computed:{
 targetCounty(){
 return this.$store.getters['parkingModule/byCounty'][this.countyname]
 }

然后我需要通过 init() 方法

将这些数据提供给我的 class 构造函数

 init(){
 scene =new THREE.Scene();
 const canvas=document.querySelector('#myCanvas');
 canvas.width=innerWidth;
 canvas.height=innerHeight;

 camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 
 1000 );
 renderer=new THREE.WebGLRenderer({canvas:canvas})
 renderer.setSize( window.innerWidth, window.innerHeight );

 let texture = new THREE.TextureLoader().load('disc.png');
 let rawRad = this.rawRadius
 console.log(this.targetCounty)
 const meshobject =new 
 ParkingSpot(rawRad,this.targetCounty.length,100,texture,this.targetCounty)
 sphereMesh= meshobject.createMesh();
 camera.position.z = 5
 scene.add(sphereMesh);

 console.log(sphereMesh.material.size)

 },

这个 init() 方法在挂载的生命周期钩子中被调用。

 mounted(){

 this.init()
 this.animate();
 // window.addEventListener()
 },
 created(){
 console.log(this.targetCounty)
     // setTimeout(()=>{console.log(this.targetCounty[0])},3000)



 },

然而，当我登录 this.targetCounty 时，它 returns 空数组。所以我解决了它通过在 DOM 中渲染计算属性导致计算属性运行仅渲染元素。

<template>
    <div>
        <canvas id="myCanvas"></canvas>
    </div>
    <p v-show='false'>{{targetCounty}}</p>
</template>

我创建虚拟 DOM 元素只是为了得到我已安装生命周期的计算属性（我认为这是非常糟糕的方法）

解决这个问题的方法是什么？

Answer 1

为什么不尝试创建一个显式 returns 值的函数，然后在 mounted() 生命周期挂钩中调用它，将其保存为常量。然后将该常量传递给您的初始化函数。

const targetCountry = this.$store.getters['parkingModule/byCounty'[this.countyname]
this.init(targetCountry)

Answer 2

您可以在 mounted() 挂钩中使用 vm.$watch() 来观察商店的 getter 初始值：

export default {
  mounted() {
    const unwatch = this.$watch(
      () => this.$store.getters['parkingModule/byCounty'][this.countyname],
      targetCounty => {
        if (targetCounty) {
          // handle initial value here...
          this.targetCounty = targetCounty
          this.init()
          this.animate()

          unwatch()
        }
      }
    )
  }
}

demo

在 Vue 中，如果我需要在挂载生命周期钩子时使用来自 getter 的状态怎么办？

In Vue, what if I need to use state from getters while mounted life cycle hook?

lifecycle

vue.js