Vuejs2 等待映射存储getter更新子属性

Vuejs2 等待映射存储getter更新子属性,vuejs2,vue-component,vuex,Vuejs2,Vue Component,Vuex,我有以下vuex Getter import { isEmpty } from 'lodash' // if has token, we assume that user is logged in our system export const isLogged = ({ token }) => !isEmpty(token) // get current user data export const currentUser = ({ user }) => user export

我有以下vuex Getter

import { isEmpty } from 'lodash'

// if has token, we assume that user is logged in our system
export const isLogged = ({ token }) => !isEmpty(token)
// get current user data
export const currentUser = ({ user }) => user
export const timeLimit = ({ token_ttl }) => token_ttl
export const getToken = ({ token }) => token
我在子组件中有以下计算的Vuex属性

 name: "ProfilePic",
  computed: {
    ...mapGetters(['currentUser']),
    url() {
      return new String('').concat(window.location.protocol, '//', window.location.hostname , ':8000', '/games/create/?search=player_id:').valueOf()
    }
  },
  mounted(){
    console.log(this.currentUser)
  },
  watch: {
    currentUser(value, old){
      console.re.log('ok', value, old);
      new QRCode(document.querySelector(".profile-userpic"), {
        text: this.url + value,
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
      })
    }
  }
父母

 import ProfilePic from '../../components/general/qrcode.vue'

 export default {
    name: 'CcDashboard',
    methods : {
      ...mapActions(['checkUserToken', 'setMessage'])
    },
    computed: {
      ...mapGetters(['isLogged'])
    },
    mounted() {
      this.checkUserToken().then(tkn => this.$store.dispatch('setMessage', {type: 'success', message: 'Your Game Starts Now!!!!'})).catch(err =>  this.$store.dispatch('setMessage', {type: 'error', message: ['Your time is up!']}))
    },
    components: {
      'profile-pic': ProfilePic
    }
  }
贮藏

我正在将VuexPersist与LocalFollow一起使用

localforage.config({
  name: 'vuevue'
});

const vuexLocalStorage = new VuexPersist({
  key: 'vuex', // The key to store the state on in the storage provider.
  storage: localforage, // or window.sessionStorage or localForage
  // Function that passes the state and returns the state with only the objects you want to store.
  // reducer: state => ({ Collect: state.Collect, Auth: state.Auth}),
  // Function that passes a mutation and lets you decide if it should update the state in localStorage.
  // filter: mutation => (true)
  modules: ['Auth','Collect'],
  asyncStorage: true
})
export const RESTORE_MUTATION = vuexLocalStorage.RESTORE_MUTATION
// // create a new object and preserv original keys
export default [...app.plugins, vuexLocalStorage.plugin]
mounted()上执行
console.log
,我得到

{__ob__: Observer}current_points: 45email: "qhegmann@jast.com"id: 2name: "Sandrine Cruickshank"total_points: 45__ob__: Observerdep: Dep {id: 20, subs: Array(4)}value: {id: 2, name: "Sandrine Cruickshank", email: "qhegmann@jast.com", current_points: 45, total_points: 45, …}
但是,

运行逻辑时,
this.currentUser.id
返回未定义的值,而不是一个值(它是这样做的)


我是否需要“等待”它从商店中正确填充?或者我需要从
$store.dispatch()
调用它吗?

我猜您想要在这里监视计算属性itemGetter的状态,并且当itemGetter与null/undefined不同时,触发方法createProductSet


我猜您想在这里观察计算属性itemGetter的状态,当itemGetter与null/undefined不同时,触发方法createProductSet


解决了我的一个软件包中的一个错误,你不需要等待。显示存储区的
状态
和getters声明。@acdcjunior不确定此处的意思……您是否询问文件是否正确导入?该属性存在于“Vue”chrome ext中,刷新几次确实会产生结果,因此我相信它没有在timeHum中设置。。仅仅用语言是很难理解的。你能展示你商店的状态和获取者的代码(相关部分)吗?@acdcjunior更新了这个问题。希望这有助于在存储代码中显示
store
getters
变量,但还需要显示它们的声明(以及它们的导入,如果适用)。例如,在顶部显示getter,但不显示它们被“组合”到存储中实际使用的
getter
对象中。不,不需要等待。显示存储区的
状态
和getters声明。@acdcjunior不确定此处的意思……您是否询问文件是否正确导入?该属性存在于“Vue”chrome ext中,刷新几次确实会产生结果,因此我相信它没有在timeHum中设置。。仅仅用语言是很难理解的。你能展示你商店的状态和获取者的代码(相关部分)吗?@acdcjunior更新了这个问题。希望这有助于在存储代码中显示
store
getters
变量,但还需要显示它们的声明(以及它们的导入,如果适用)。例如,在顶部显示getter,但不要显示它们被“组合”到商店中实际使用的
getter
对象中。我离开了我的计算机,但我相信这也是我试图实现的目标。那么映射的“getter”函数也可以像我假设的那样被观察?当我回家时,我必须确认我做了这件事。记住,getter是组件的计算属性,所以您可以像查看另一个计算属性或数据属性一样查看它。无论如何,正如acdcjunior所说,欢迎对您的问题进行更详细的解释,也许这个解决方案仍然不是好的:)我离开了我的计算机,但我相信这也是我试图实现的目标。那么映射的“getter”函数也可以像我假设的那样被观察?当我回家时,我必须确认我做了这件事。记住,getter是组件的计算属性,所以您可以像查看另一个计算属性或数据属性一样查看它。无论如何,正如acdcjunior所说,欢迎对您的问题进行更详细的解释,也许这个解决方案仍然不是好的:)
{__ob__: Observer}current_points: 45email: "qhegmann@jast.com"id: 2name: "Sandrine Cruickshank"total_points: 45__ob__: Observerdep: Dep {id: 20, subs: Array(4)}value: {id: 2, name: "Sandrine Cruickshank", email: "qhegmann@jast.com", current_points: 45, total_points: 45, …}
computed : {
    ...mapGetters([
        'itemGetter'
    ])
},

watch : {
    itemGetter(newVal, oldVal) {
        if (typeof newVal == null || typeof newVal == undefined)
            return

        this.createProductSet(newVal)           
    }
},

methods : {
    createProductSet(id){
        // logic
    }
}