Как в интерактивном режиме показывать данные из магазина

Question

Я новичок в Vue. Я пытаюсь в интерактивном режиме показать данные из хранилища - мой ввод должен автоматически отображаться в summary.vue.

Что я сделал до сих пор:

summary.vue

<template>
  <div id="summary-area">
        {{ summaryInfo }}
  </div>
</template>

<script>
import { store } from '../store.js';

  export default {
    name: 'summaryInfo',
    data() {
      return {
        summaryInfo: store.state.input1,
      };
    },
  }
</script>

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
      input1: '',
    },
  mutations: {
    upateState(state, value) {
      this.state.input1= value;
    }
  }
});

input.vue

<template>
<div class="root">
    <el-input placeholder="Please input" v-model="input1"></el-input>
</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'


export default {
  name: 'NetworksSelector',

  computed: {
    ...mapState(['input1']),

    input1: {
      get () {
        return this.$store.state.input1;
      },
      set (value) {
        this.upateState(value);
      }
    }
  },
  methods: {
    ...mapMutations(['upateState'])
    },
};
</script>

Чего мне не хватает?

Журнал консоли показывает, что состояние обновляется правильно, но эти изменения не видны в шаблоне.

Answer 1

Хорошо, моя проблема была с summary.vue.

Правильный компонент должен выглядеть следующим образом:

<template>
  <div id="summary-area">
        {{ summaryInfo }}
  </div>
</template>

<script>
import { store } from '../store.js';

  export default {
    name: 'summaryInfo',
    computed: {
        summaryInfo: function() {
          return store.state.input1
        }
    }
  };
</script>