0

我正在尝试将变量从父（页面）组件传递给子（模态）组件。在阅读了几个例子之后，这很好用。有问题的变量是从另一个组件作为路由参数引入的。如果我刷新页面，变量会丢失并且不能再传递给孩子。我的问题是，使用商店来坚持这一点的最佳方法是，或者如果用户刷新，是否可以以另一种方式坚持？任何帮助，将不胜感激

家长

  <b-container>
    <Modal v-show="displayModal" @close="closeModal">
      <template v-slot:body>
        <ExpressionCreate v-show="displayModal" :lender-id="lenderId" @close="closeModal"/>
      </template>
    </Modal>
    <div class="card" style="width: 100%;">
      <div class="card-header">
        <h5>{{this.lenderName}}</h5>
        <b-alert :show="this.loading" variant="info">Loading...</b-alert>
      </div>
      <b-btn block variant="success" @click="showCreateLenderModal">Add Expression</b-btn>

....


  created () {
    this.lenderId = this.$route.params.lenderId

...

    navigate () {
      router.go(-1)
    },
    showCreateLenderModal () {
      this.displayModal = true
    },
    toggleDisplayModal (isShow) {
      this.displayModal = isShow
    },
    async closeModal () {
      this.displayModal = false
    }

孩子

   <label>lender id:</label>{{this.lenderId}}

...

  props: {
    lenderId: {
      type: Number
    }
  },
4

3 回答 3

1

你可以用VueSession坚持。

只需坚持你lender_id的

this.$session.set('lender_id', this.lender_id)

你可以稍后得到它

saved_lender = this.$session.get('lender_id')
if (saved_lender) {
    // handle saved case here
}
于 2020-11-20T12:16:25.030 回答
0

您可以通过执行以下操作在 URI 中使用查询参数：

$route.push('/', { query: { param: 3123 } })

这将生成 URL /?param=3123，这将在刷新后起作用。或者，您可以使用vuex和vuex-localstorage插件，让您将数据保存在浏览器中，您可以关闭浏览器并再次打开，数据将被恢复。

于 2020-11-19T08:47:55.077 回答
0

为了使应用程序的状态能够持久化，我建议您使用 vuex 来管理状态并使用一个库，以一种干净的方式将持久化抽象为 vue。一个流行的库是 vuex-persist。https://www.npmjs.com/package/vuex-persist

如果您不想使用商店，VueSession，这里链接的包应该可以解决问题

于 2020-11-21T14:40:45.650 回答