Question

在将新内容推入数组后，我尝试更新组件。我在createPost.vue中创建一个帖子，并将其提交到store.js文件中，在该文件中存储我发送到状态的对象。

我遇到的问题是我太刷新页面无法获取数组中的新数据。

createPost.vue：

<script>
import store from '../store'
import axios from 'axios';

export default {
    methods:{
        postPostToDb(title,content){
            const postObj = {
                title:title,
                content:content,
            }
            axios.post('http://localhost:5000/v1/api/posts', postObj)
            .then((postObj)=>{
                this.$store.commit('ADD_POST', postObj);
            });
        },
    }, 
}
</script>

这是我从store.js获取所有数据的地方。

<script>
import store from '../store'

export default {
    computed:{
      items:function(){
        return store.state.posts;
      },
    },
    async created(){
      let data = await fetch('http://localhost:5000/v1/api/posts');
      data = await data.json();
      this.$store.commit('INIT_POST', data);
  },
}
</script>

store.js：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      posts: [],
  },
  mutations: {
    ADD_POST(state,postObj){
        state.posts.push(postObj);
        alert(state.posts);
    },
    INIT_POST(state,postObj){
      postObj.forEach(element => {
        state.posts.push(element);
      });
    },
  },
  actions: {

  }
})

Answer 1

您可以尝试使用mapGetters。

<script>
import store from '../store'
import { mapGetters } from 'vuex'

export default {
    computed:{
        ...mapGetters({
            posts: 'getPosts'
        })
    },
    async created(){
      let data = await fetch('http://localhost:5000/v1/api/posts');
      data = await data.json();
      this.$store.commit('INIT_POST', data);
  },
}
</script>

现在计算出的变量“ items”可以通过“帖子”访问。

在Store.js中

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      posts: [],
  },
  getters: {
      getPosts(state) {
          return state.posts
      }
  },
  mutations: {
    ADD_POST(state,postObj){
        state.posts.push(postObj);
        alert(state.posts);
    },
    INIT_POST(state,postObj){
      postObj.forEach(element => {
        state.posts.push(element);
      });
    },
  },
  actions: {

  }
})

Answer 2

它是Vue reactivity caveat。您需要更新state.posts对象以使vuex具有反应性。请尝试：

  ADD_POST(state,postObj){
      state.posts = state.posts.concat([postObj])
  },

Answer 3

您使用的Vuex错误。

如果将其设置正确，则存储应为this.$store，并且计算值应类似于

computed:{
  items:function(){
    return this.$store.state.posts;
  },
},

突变后Vuex无法更新组件

3 个答案: