计算属性取决于 vuex 存储。如何更新缓存的值？

Posted 2023-02-23

【中文标题】计算属性取决于 vuex 存储。如何更新缓存的值？

【英文标题】：Computed property depends on vuex store. How to update the cached value?

【发布时间】：2019-01-28 12:01:51

【问题描述】：

this.$store.state.Auth.loginToken 的值被其子组件之一修改。 this.$store.state.Auth.loginToken 的初始值为undefined。但是，其值的更新对navItems 的缓存值没有影响，因此它总是返回第二个值。

computed: 
    navItems () 
        return this.$store.state.Auth.loginToken != undefined ?
        this.items.concat([
             icon: 'add', title: 'Add new journal entry', to: '/' ,
             icon: 'power_settings_new', title: 'Logout', to: '/logout'
        ]) :
        this.items.concat([
             icon: 'play_arrow', title: 'Login', to: '/login' 
        ])
    

有没有更好的方法来监视this.$store.state.Auth.loginToken，以便它可以与navItems 一样使用？

【问题讨论】：

是的，这就是 Vuex getter 的用途。你可以在这里阅读更多内容vuex.vuejs.org/guide/getters.html。基本上，每次更改 loginToken 时，从 getter 返回的值都会更新。您可以将粘贴在此处的所有逻辑移动到 getter 中并仅返回最终的 items 对象。

我是 vuex 新手。感谢您指出。我会看穿的。 ***.com/questions/40546323/… 为我工作。我删除了 undefined 作为初始值，并在其中放置了一个空字符串。它现在有效。

【参考方案1】：

我创建了一个如何使用 vuex getter 和 Auth 令牌 (codepen) 的基本示例：

const mapGetters = Vuex.mapGetters;

var store = new Vuex.Store(
  state: 
    Auth: 
      loginToken: ''
    ,
    menuItems: [
        icon: 'home', title: 'Home', to: '/' ,
        icon: 'about', title: 'About', to: '/about' ,
        icon: 'contact', title: 'Contact', to: '/contact' 
    ]
  ,
  mutations: 
    SET_LOGIN_TOKEN(state, data) 
      state.Auth.loginToken = 1
    
  ,
  getters: 
    menuItems(state, getters) 
      if(state.Auth.loginToken !== '') 
        return state.menuItems.concat([
            icon: 'profile', title: 'Profile', to: '/profile'
        ])
      
      return state.menuItems
    ,
    loggedIn(state) 
      return state.Auth.loginToken !== ''
    
  ,
  actions: 
    doLogin(commit) 
       commit('SET_LOGIN_TOKEN', 1)
    
  
);

new Vue(
  el: '#app',
  store,
  data: function() 
    return 
      newTodoText: "",
      doneFilter: false
    
  ,
  methods: 
    login() 
       this.$store.dispatch('doLogin')
    
  ,
  computed: 
   ...mapGetters(['menuItems', 'loggedIn'])
  
)

这只是一个示例，因此您可以忽略实际的登录操作。此外，store 应该是一个目录，getter、mutations 和 actions 应该有自己的文件，然后导入到 store 中的 index.js 中，就像在这个 example 中一样