主页 / 问题 / 884397
Accepted
Alex
Asked:2020-09-23 07:54:46 +0000 UTC2020-09-23 07:54:46 +0000 UTC

如何通过存储在 vuex 中以反应方式将数据输出到不同的模板

  • 772

我不知道如何在通过store填充一个组件中的输入时显示值对于另一个中的输出，现在我通过计算完成，一切正常，但只有在填充输入的模板中返回此属性. 有一个子组件，其中 

<template>

 <input type="text" class="form-control" v-model="phone">
</template>
<script>
 export default {
  data(){
   return { 
        phone:''
     }
    },
   computed:{
     heroPhone(){
        this.$store.dispatch('setPhone',  this.phone)
        return this.$store.getters.getPhoneValue;
     },
   }

</script>

在 store.js 中

export default new Vuex.Store({
    state:{
        phoneValue: '',
    },
    getters:{
      getPhoneValue: state => { return state.phoneValue }
    },
    actions:{
      setPhone(context, data){
        context.commit('setPhone', data)
    },
    mutations:{
      setPhone(state, payLoad){
        state.phoneValue = payLoad
      },
    }
  })

因此，使用另一个组件，我尝试在计算属性中显示来自商店的 phoneValue 值，

 computed:{
        phone(){
          return this.$store.getters.getPhoneValue
        } 
      }

我通过 {{phone}} 输出属性本身。但是没有像这样显示，但只有在我捕获输入值的模板中才会显示

v-model="phone"

打印声明的计算属性 {{heroPhone}} 然后在其他模板中该值store.phoneValue显示正常。

我不知道如何通过 vuex 正确地将数据响应式地输出到不同的模板。

也许有人遇到过。

javascript

1 个回答

  1. Best Answer

    在当前版本中，当 phone 字段更改时，该组件不会引起任何处理，因此存储中不会存储任何内容。

    实际上，当您phone改用它时，heroPhone负责自动属性逻辑的​​代码开始被调用，它将值设置phoneValue为vuex.store.

    要解决您的问题，您可以添加一个heroPhonegetter 和一个 setter。实际上，输入字段的任何更改都会调用我们的设置器heroPhone。因此，对于任何新符号，在 store 中调用 save 是多余的，在这种情况下，debouncelodash 库将帮助我们。如果您使用它，请不要忘记将其连接到您的项目。

    简要debounce阻塞频繁的函数调用，只留下最后一个。因此，只会将最新版本写入商店。

    new Vue({
  el: "#app",
  data () {
            return {
                phone: ''
            }
        },
        computed: {
            heroPhone: {
            get: function () {
            		return this.phone; // вернем текущее значение
            },
            set: function(value) {
             this.phone = value; // поставим новое
             this.debounceSetPhone(); // проставим новое уже в store
            }}
        },
        created() {
        		// чтобы не сохранять phone на каждый ввод символа
        		// будет сохранять раз в 1 секунду
        		this.debounceSetPhone = _.debounce(this.setPhone, 1000)
        },
        methods:{
        	setPhone() {
          	//this.$store.dispatch('setPhone',  this.phone);
            console.log(this.phoneProp);
          }
        }
        
        
})
    <div id="app">
<input type="text" class="form-control" v-model="heroPhone">
</div>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

    • 0

相关问题