当 vuex store 改变时更新 prop 属性

Question

使用此代码成功更改 vuex 存储 (state.posts.post.comments) 后，并使用 Vue.set 因此 Vue 可以识别对象的添加属性:

store/modules/post.js

const mutations = {
    [types.SET_POST_COMMENTS] (state, { comments, id }) {
      let post = state.posts.find(post => post._id === id)
      Vue.set(post, 'comments', comments)
    }
}

模板或组件没有更新。道具 post 是非反应性的（我假设是因为即使观察者也没有被触发）。我已经仔细检查过，每个 post 的评论属性的 Vuex 存储正在使用评论对象成功更新，但是组件 SinglePost.vue 没有看到这些更改。

SinglePost.vue

export default {
  name: 'single-post',
  props: {
    'post': {
      type: Object
    }
  },
  data () {
    return {
      currPost: this.post // tried to reassign post locally
    }
  },
  computed: {
    comments() {
      return this.post.comments // tried to compute comments locally
    }
  },
  watch: {
    post: function(val) { // tried to watch currPost for changes
       console.log('never triggered')
       this.currPost = val 
    }
  }

最终，我可以通过显式地将评论从商店返回到组件方法并设置本地评论对象来设置本地变量，但我想使用我的中央商店（并假设有办法） .

SinglePost 模板

{{comments}} // always empty
{{post}} // doesn't reflect store Vue.set for post.comments
{{currPost}} // doesn't reflect store Vue.set for post.comments

编辑

我如何获得 posts 是：

getPosts ({ commit, state, getters, dispatch, rootState }, ctx) {
  //other stuff
  APIHelper.post('/post/search', mergedPayload).then(res => {
    var results = res.data.results
    commit('SET_POSTS', posts || [])
    // where SET_POSTS is just state.posts = posts

vuex 操作 getPosts 从 Posts.vue 组件调用而不返回任何内容，因为它是由突变 @click="getPosts(this.context)" 设置的（这非常适合设置 posts）

    <div v-for="post in posts">
      <single-post :key="post._id" :post="post" context="feed" />
    </div>

Answer 1

你应该使用vuex的mapGetters helper method.

computed: {
    ...mapGetters({
        currPost: 'GET_CURRENT_POST'
    })
},

它提供对存储状态的访问并且是反应式的，因此您不需要观察者或额外的计算。

Answer 2

Two-way 数据绑定是实现此目的的好方法，您可以创建自己的 getter/setter 方法并在需要时将其导入 Vue 组件中：

export function mapFields(fields)
{
    let computers = {}
    for (let field of fields) {
        computers[field] = {
            get() {
                return this.$store.state[field];
            },
            set(value) {
                this.$store.commit(`UPDATE_${field.toUpperCase()}`, value);
            }
        }
    }
    return computers;
}

然后在你的 Vue 组件中：

import {mapFields} from 'utils.js'; // or whatever the name of the file

computed: {
   ...mapFields(['mappedState']),
},

正在您的 Vue 组件中更新 this.mappedState：

this.mappedState = ['foo', 'bar'];

将触发：

this.$store.commit('UPDATE_MAPPEDSTATE', ['foo', 'bar']);

要获取属性的数据，只需在您的组件中调用它：

// In your template
{{ mappedState }}

// In Vue methods
this.mappedState;

当 vuex store 改变时更新 prop 属性

Update prop property when vuex store changes

javascript

vue.js

vuex