Vue.js 通过模态传递变量答案

【问题标题】：Vue.js passing a variable through a modalVue.js 通过模态传递变量
【发布时间】：2021-03-02 14:33:21
【问题描述】：

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

家长

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

【问题讨论】：

使用 VueSession 进行持久化。一个无能的版主删除了我简短的中肯答案。

标签： vue.js bootstrap-modal vuex routeparams bootstrap-vue

【解决方案1】：

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

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

这将生成 URL /?param=3123，这将在刷新后工作。或者，你可以使用vuex和vuex-localstorage插件，让你在浏览器中持久化数据，你可以关闭浏览器再打开，数据就会恢复。

【讨论】：

【解决方案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
}

【讨论】：

谢谢，这非常适合我的用例，简单但有效

【解决方案3】：

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

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

【讨论】：

对于“干净”的一些定义