Vuex - Update an entire array

You need to dispatch action like any of the following:

// dispatch with a payload
this.$store.dispatch('loadItems', {items})

// dispatch with an object
this.$store.dispatch({type: 'loadItems',items})

use vue's set function. This will make sure that the Vue's reactivity kicks in and updates the required objects.

import Vuex from 'vuex';
const store = new Vuex.Store({
    state: {
        items: []
    },

    mutations: {
        MUTATE_ITEMS: (state, items) => {
            Vue.set(state, 'items', items);
            // or, better yet create a copy of the array
            Vue.set(state, 'items', [...items]);
        }
    },

    actions: {
        loadItems: (context, items) => {
            context.commit('MUTATE_ITEMS', items);
        }
    }
  })
;

When dealing with arrays or Objects, it's a good idea to prevent mutability, which I usually do with a spread operator {...myObject} or [..myArray] this will prevent changes to the object from other source to change your source, so it's a good idea to implement in getters too.

---

Update:

Here is a working example: https://codesandbox.io/s/54on2mpkn (codesandbox allows you to have single file components)

The thing I noticed is that you don't have any getters, those help get the data. You can call them using computed values directly, or using mapGetters. but they are not mandatory. Here are three ways you can get the data

<script>
import { mapGetters } from "vuex";
import Item from "./Item";

export default {
  name: "ItemList",
  components: {
    Item
  },
  computed: {
    ...mapGetters(["items"]), // <-- using mapGetters
    itemsGet() {    // <-- using getter, but not mapGetters
      return this.$store.getters.items;
    },
    itemsDirect() {  // <--no getter, just store listener
      return this.$store.state.items;
    }
  }
};
</script>

it doesn't matter which one you chose from the functionality standpoint, but using getters makes for more maintainable code.