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>

如何以交互方式显示商店中的数据

1 个答案: