Question

我使用vuex，并在页面模块中设置标题和内容，安排了一种销毁方法来重置它们。如果单击其他组件，则在重置值时没有问题，但是当我单击其他静态页面时，组件不会销毁并且不会更新数据。有没有一种方法可以为同一组件重置vuex状态值？？

const state = {
  page: {},
};
const getters = {
  page(state) {
    return state.page;
  },
};
const mutations = {
  setAPage (state, pPage) {
    state.page = pPage
    state.errors = {}
  },
  setCleanPage(state){
    state.page = null
  },
  reset(state) {
    const s = state();
    Object.keys(s).forEach(key => {
      state[key] = s[key];
    });
    console.log('state', state)
  }
}

const actions = {
  fetchAPage (context, payload) {
    context.commit("setCleanPage");
    const {slug} = payload;
    return ApiService.get(`pages/${slug}/`)
      .then((data) => {
        context.commit("setAPage", data.data);
      })
      .catch((response) => {
        context.commit("setError", response.data)
      })
  },
  resetAPage(context){
    context.commit("reset");
  }
};
export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

以及在我的组件中：

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
    name: "Page",
    
    computed: {
    ...mapGetters('pages', {page: 'page'}),
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params /foo/:id, when we
    // navigate between /foo/1 and /foo/2, the same Foo component instance
    // will be reused, and this hook will be called when that happens.
    // has access to >this component instance.
    console.log(to)
    console.log(from)
    console.log(next)

    this.$store.dispatch('pages/resetAPage');
 
  },
  methods: {
    ...mapActions(['pages/fetchAPage']),
  },
  destroyed() {
   this.toggleBodyClass('removeClass', 'landing-page');
   this.$store.dispatch('pages/resetAPage');
  },
  created() {
    this.$store.dispatch('pages/fetchAPage' , this.$route.params) 
  },
};
</script>

如何重置或更新同一组件的数据？

谢谢

Answer 1

您可以使用此软件包进行重置-https://github.com/ianwalter/vue-component-reset

要使导航脱离使用组件的路线（https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards）时，可以在组件中使用beforeRouteLeave保护罩

beforeRouteUpdate组件保护仅在当前路径中使用了该组件并且将在下一路径中重用时才被调用。

Answer 2

我建议您注意该参数更改。

我不知道您如何利用参数，但是您可以将它们作为道具传递给组件，然后在它们上添加一个观察程序，这将调用您的vuex重置操作。

// in your router
// ... some routes
{
  path: "/page/:id",
  props: true, // this passes :id as prop to your component
  component: Page
}

在您的组件中

export default {
  name: "Page",
  props: ["id"],  // your route param
  computed: {
    ...mapGetters('pages', {page: 'page'}),
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params /foo/:id, when we
    // navigate between /foo/1 and /foo/2, the same Foo component instance
    // will be reused, and this hook will be called when that happens.
    // has access to >this component instance.
    console.log(to)
    console.log(from)
    console.log(next)

    this.$store.dispatch('pages/resetAPage');
 
  },
  methods: {
    ...mapActions(['pages/fetchAPage']),
  },
  watch: {
    id() { // watch the id and reset the page if it has changed or add additionnal logic as needed
      this.$store.dispatch('pages/resetAPage');
    }
  },
  destroyed() {
   this.toggleBodyClass('removeClass', 'landing-page');
   this.$store.dispatch('pages/resetAPage');
  },
  created() {
    this.$store.dispatch('pages/fetchAPage' , this.$route.params) 
  },
};

如何重置组件的状态值？

2 个答案: