Vue.js 通过模态传递变量

Question

我正在尝试将变量从 Parent（页面）组件传递到 Child（模态）组件。在阅读了几个例子之后，这工作正常。有问题的变量作为路由参数从另一个组件引入。如果我刷新页面，变量就会丢失，不能再传递给 child。我的问题是，最好的方法是使用商店来保存它，还是可以在用户刷新时以另一种方式保存？任何帮助将不胜感激

Parent

  <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
    }

Child

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

...

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

Answer 1

您可以通过以下方式在 URI 中使用查询参数：

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

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

Answer 2

可以用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
}

Answer 3

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

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

Vue.js 通过模态传递变量

Vue.js passing a variable through a modal

bootstrap-modal

vue.js

routeparams

vuex

bootstrap-vue