切换路由时Vuex重置存储变量

Question

我正在尝试创建一种方法，让您回到之前的路线，然后重置存储在 vuex 中的变量。 到目前为止，我尝试这样做： （在componentfrom模板中）：

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

在组件脚本中：

import { mapGetters } from 'vuex'

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

还有我的 vuex 商店：

export const store = new Vuex.Store({
    state:{
        movies : []
    },
    getters: {
        movies: state => {
            return state.movies
        }
    },
    mutations: {
        mutateArray: (state, payload) => {
            state.movies = payload
        }
    },
    actions: {
        updateArray({commit}, payload ){
            commit('mutateArray', payload)
         }
    }
})

单击按钮将我带到上一条路线，但movies 状态变量似乎不为空（因为该路线上显示的内容表明它不为空）

Answer 1

问题是您以不正确的方式改变状态。您需要使用空有效负载调用 updateArray 操作。在您的 bar 方法中，它可能如下所示：

this.$store.dispatch('updateArray',[]);

请注意，这不是关于如何调用操作的唯一解决方案。欲了解更多信息，请访问docs。