Vuex не может обновить компонент после мутации

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

Это Vue реактивность предостережение .Вам нужно обновить state.posts объект, чтобы сделать vuex реактивным.Пожалуйста, попробуйте:

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

Answer 2

Вы используете Vuex неправильно.

Если вы настроите его правильно, хранилище должно быть доступно как this.$store, а вычисленное значение должно выглядеть как

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

Answer 3

Вы можете попробовать использовать 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" доступна как "posts".

А в 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: {

  }
})