切换路由时重置Vuex Store变量失败：返回后movies未清空

Hey there! Let's break down why your movies state isn't clearing when you click that back button, and fix it step by step.

What's Going Wrong? #

Your current approach has two critical issues:

1. You're trying to modify a Vuex getter directly: The movies property from mapGetters is a read-only computed snapshot of the Vuex state. Assigning this.movies = [] only overwrites a local reference in your component—it doesn't touch the actual store state at all.
2. Vuex state requires mutations for changes: This is a core Vuex rule—all state updates must go through explicit mutation functions. This ensures every state change is trackable, predictable, and triggers reactivity across your app.

Step-by-Step Solution #

1. Add a Mutation to Clear the Movies State

First, update your Vuex store to include a dedicated mutation for clearing the movies array:

export const store = new Vuex.Store({
  state: {
    movies: []
  },
  getters: {
    movies: state => state.movies
  },
  mutations: {
    mutateArray: (state, payload) => {
      state.movies = payload
    },
    // New mutation to reset the movies array
    clearMovies: (state) => {
      state.movies = []
    }
  },
  actions: {
    updateArray({commit}, payload ){
      commit('mutateArray', payload)
    }
  }
})

2. Update Your Component to Trigger the Mutation

Now, modify your component to call this mutation instead of trying to overwrite the getter. You can use mapMutations for cleaner code, or directly call this.$store.commit:

<template>
  <button type="button" class="btn btn-primary btn-lg btn-block" @click="bar">Back</button>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  methods: {
    ...mapGetters(['movies']),
    // Map the new mutation to your component methods
    ...mapMutations(['clearMovies']),
    bar() {
      // First clear the Vuex state
      this.clearMovies()
      // Then navigate back to the previous route
      this.$router.go(-1)
    }
  }
}
</script>

If you prefer using actions (for consistency with async operations), you can wrap the mutation in an action:

// Add this to your Vuex store actions
actions: {
  updateArray({commit}, payload ){
    commit('mutateArray', payload)
  },
  clearMovies({commit}) {
    commit('clearMovies')
  }
}

Then update your component to use mapActions:

import { mapGetters, mapActions } from 'vuex'

export default {
  methods: {
    ...mapGetters(['movies']),
    ...mapActions(['clearMovies']),
    bar() {
      this.clearMovies()
      this.$router.go(-1)
    }
  }
}

Why This Works #

By using a mutation to clear the state, you're following Vuex's reactivity rules. This ensures the state change is properly detected, and any components using the movies getter (including the previous route's component) will automatically update to reflect the empty array.

内容的提问来源于stack exchange，提问作者Alex T