如何重置组件的状态值？

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

当您想从使用组件的路径中获取导航时，您可以在组件中使用 beforeRouteLeave 保护 (https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards)

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) 
  },
};