[Vuejs]-How to track changes in a property stored in Vuex(store) and perform some method based on the value?

0đź‘Ť

âś…

Rather than explicitly mutating your local data in response to some state change, it is better to compute your links within a computed property because it will automatically update whenever some dependent data has changed. It’ll “just work”.

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" },
      ];
    }
  }
}

Leave a comment