Как отследить изменения в свойстве, хранящемся в Vuex (store), и выполнить какой-либо метод на основе значения? - PullRequest
Новая
       38

Как отследить изменения в свойстве, хранящемся в Vuex (store), и выполнить какой-либо метод на основе значения?

0 голосов
/ 06 марта 2020

Я пытаюсь изменить ссылки, основываясь на переменной user_role, которая хранится в Vuex (store). Я не могу найти подходящий способ отследить изменение и, основываясь на его значении, я хочу выполнить какой-то метод. Любые предложения о том, как это сделать? 


------------------------------store.js-------------------------------
export default new Vuex.Store({
  state: {
    user_role: "User"
  },
  mutations: {},
  actions: {},
  modules: {}
});




-----------------------------------component.vue---------------------------


export default {
  name: "Navbar",
  data() {
    return {
      links: [
        { text: "Projects", route: "/projects" },
        { text: "Requests", route: "/requests" },
        { text: "", route: "" },
        { text: "Resources", route: "/resources" }
      ],
      pers_actions: ["Profile", "LogOut"],
    };
  },
  watch: {
    user_role: {
      if (user_role === "PM") {
        this.links[2] = {
          text: "Allocations",
          route: "/allocations"
        };
      } else if (user_role === "PMO") {
        this.links[2] = {
          text: "Reports",
          route: "/reports"
        };
      } else if (user_role === "User") {
        this.links = [
          {
            text: "Allocations",
            route: "/allocations"
          }
        ];
      }
    }
  },

1 Ответ

0 голосов
/ 06 марта 2020

Вместо того, чтобы явно изменять ваши локальные данные в ответ на какое-либо изменение состояния, лучше вычислять ваши ссылки в пределах вычисляемого свойства, поскольку оно будет автоматически обновляться всякий раз, когда изменяются некоторые зависимые данные. Это будет "просто работать". 

computed: {
  links() {
    switch (this.$store.state.user_role) {
      case: "PM": return [
        { text: "Projects", route: "/projects" },
        { text: "Requests", route: "/requests" },
        { text: "Allocations", route: "/allocations" },
        { text: "Resources", route: "/resources" },
      ];

      case: "PMO": return [
        { text: "Projects", route: "/projects" },
        { text: "Requests", route: "/requests" },
        { text: "Reports", route: "/reports" },
        { text: "Resources", route: "/resources" },
      ];

      // For any other role
      default: return [
        { text: "Allocations", route: "/allocations" },
      ];
    }
  }
}
...