Вычисляемое свойство зависит от магазина vuex. Как обновить кешированное значение?

Значение 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?


vue.js nuxt.js computed-properties vuex
person Compro Prasad    schedule 22.08.2018    source источник
comment
Да, для этого нужны геттеры Vuex. Вы можете узнать больше здесь, vuex.vuejs.org/guide/getters.html. По сути, каждый раз, когда изменяется loginToken, значение, возвращаемое получателем, будет обновляться. Вы можете переместить всю логику, которую вы вставили сюда, в геттер и вернуть только последний объект items.   -  person Allkin    schedule 22.08.2018
comment
Я новичок в vuex. Спасибо, что указали. Я увижу это насквозь. stackoverflow.com/questions/40546323/, работает для меня. Я удалил undefined как начальное значение и поместил туда пустую строку. Пока работает.   -  person Compro Prasad    schedule 22.08.2018

Ответы (1)


arrow_upward
2
arrow_downward

Я создал базовый пример использования геттеров vuex и токена аутентификации (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'])
  }
})

Это просто пример, поэтому вы можете игнорировать фактическое действие при входе в систему. Кроме того, хранилище должно быть каталогом, геттеры, мутации и действия должны иметь свои собственные файлы, которые затем импортируются в index.js в хранилище, как в этом пример

person Allkin    schedule 22.08.2018