Question

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一样使用？

Answer 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'])
  }
})

这只是一个示例，因此您可以忽略实际的登录操作。此外，商店应该是目录，获取程序，变异和操作应具有自己的文件，然后像在example

中那样，将其导入商店的index.js中

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

1 个答案: