Vuex Store does not update

Question

I've been refactoring my Vue SPA and one of the changes I was wanting to make has been the removal of manually importing "Store" in every component that needs it and instead uses the "this.$store.dispatch('module/update', data)", but it doesn't update the store like "Store.dispatch('module/update', data)" used to in the past.

    methods: {
      update() {
        let office = {
          id: this.office.id,
          name: this.name,
          description: this.description,
          abbreviation: this.abbreviation
        };

        this.$http.post('/api/office/update', office).then(function(result) {
          Store.dispatch('offices/update', result.data);
          this.$router.push({ path: '/settings/offices' });
        }).catch((error) => {
          this.$router.push({ path: '/settings/offices' });
        });
      }
    }

export const Offices = {
  namespaced: true,
  state: {
    all: []
  },
  mutations: {
    ADD_OFFICE: (state, offices) => {
      offices.forEach(office => {
        state.all.push(office);
      });
    },
    DELETE_OFFICE: (state, id) => {
      state.all.splice(state.all.map((office) => { return office.id }).indexOf(id), 1);
    },
    UPDATE_OFFICE: (state, data) => {
      Object.assign(state.all.find((office) => office.id === data.id), data);
    }
  }, 
  actions: {
    get(context) {
      Axios.get('/api/office/all').then((response) => {
        context.commit('ADD_OFFICE', response.data);
      });
    },
    create(context, office) {
      context.commit('ADD_OFFICE', office);
    },
    update(context, data) {
      context.commit('UPDATE_OFFICE', data);
    },
    delete(context, id) {
      context.commit('DELETE_OFFICE', id);
    }
  }
}

I expected it to update the store as importing it manually does.

Where are you attempting to use `this.$store`? Can't see any code using that. — Phil, Aug 01 '19 at 04:14
Presumably you're trying to use `this.$store` within the `function(result) { ... })`. You should be seeing an error in your console saying _"`this.$store` is not a function"_ or something similar. I've got a duplicate post for you to take a look at. **TL;DR** Use an arrow function... `then(result => { ... })` — Phil, Aug 01 '19 at 04:16

score 0 · Answer 1 · answered Aug 01 '19 at 02:43

Mutations should be immutable to make data reactive

 mutations: {
    ADD_OFFICE: (state, offices) => {
      state.all = state.all.concat(offices)
    },
    DELETE_OFFICE: (state, id) => {
      state.all = state.all.filter(office => office.id != id)
    },
    UPDATE_OFFICE: (state, data) => {
      const officeIndex = state.all.findIndex(office => office.id === data.id)
      const newObj = Object.assign(state.all[officeIndex], data)
      state.all = [
        ...state.all.slice(0, officeIndex),
        newObj,
        ...state.all.slice(officeIndex + 1)
      ]
    }
  },

Good advice in general but Vue (and Vuex) override the array methods `push` and `splice` to be reactive so this isn't OP's issue — Phil, Aug 01 '19 at 04:17

Vuex Store does not update

1 Answers1