vue watch mapState不工作答案

【问题标题】：vue watch mapState not workingvue watch mapState不工作
【发布时间】：2017-07-03 23:40:19
【问题描述】：

我在组件中使用了存储值并尝试更新它。单击按钮时存储值发生更改，但更改未反映在组件输出中（即 {{query}}）

    <template>
         span {{query}}
         button(@click='updateQuery')
    </template>

    <script>
    export default {
        computed: mapState('map', [
            'query'
        ]),
        methods: {
            ...mapMutations('map', [
                'setStart'
            ]),
            updateQuery() {
                this.setStart(new Date());
            }
       }
   }
   </script>

商店：

export default {
    namespaced: true,
    state: {
        query: {},
        start: null,
        end: null
    },
    mutations: {
        setQuery(state, value) { state.query = value },
        setStart(state, value) {
            state.start = value;
            state.query.timestamp = state.query.timestamp ? state.query.timestamp : {};
            state.query.timestamp.$gte = value;
        },
        setEnd(state, value) {
            state.end = value;
            state.query.timestamp = state.query.timestamp ? state.query.timestamp : {};
            state.query.timestamp.$lte = value;
        },
    }
}

【问题讨论】：

您是否在模板中使用了某种渲染引擎？也许它造成了这种影响？还是 v-once？

标签： vue.js vuex

【解决方案1】：

这里的问题是Vue cannot detect，您正在向query 对象动态添加新属性。

在这段代码中：

state.query.timestamp = state.query.timestamp ? state.query.timestamp : {};

您正在向query 添加一个以前不存在的timestamp 属性。因此，它不会是被动的。为了正确使用 Vue，您需要使用 Vue.set。

Vue.set(state.query, `timestamp`, state.query.timestamp ? state.query.timestamp : {})

请注意，您还需要在 $gte 属性的下一行执行此操作。

或者，您可以初始化查询对象。

state: {
    query: {
      timestamp:{
        $gte: null,
        $lte: null
      }
    },
    start: null,
    end: null
},

【讨论】：