Question

如何解决 vuex 存储中的“Uncaught TypeError: Cannot read property 'get' of undefined”？

2018-09-27

910

vue.js vuejs2 vue-component vuex vuex-modules

如果我像这样在我的组件中尝试 this .$session.get(SessionKeys.Cart) ：

<template>
        ...
    </template>
    <script>
        ...
        export default {
            ...
            methods: {
                add(item) {
                    console.log(this.$session.get(SessionKeys.Cart)
                    ...
                }
            }
        }
    </script>

它有效。我成功获取了会话购物车

但如果我像这样在我的 vuex 商店中尝试它：

import { set } from 'vue'
    // initial state
    const state = {
        list: {}
    }
    // getters
    const getters = {
        list: state => state.list
    }
    // actions
    const actions = {
        addToCart ({ dispatch,commit,state },{data})
        {
            console.log(this.$session.get(SessionKeys.Cart))
            ...
        }
    }
    // mutations
    const mutations = {
        ...
    }
    export default {
        state,
        getters,
        actions,
        mutations
    }

存在错误： Uncaught TypeError：无法读取未定义的属性“get”

我该如何解决这个错误？

Answer 1

您可以将组件 this 传递到您的调度函数中，称为使用有效负载调度。如下所示：

<template>
    ...
</template>
<script>
    ...
    export default {
        ...
        methods: {
            this.$store.dispatch('addToCart', { data: {}, ctx: this })

            // add(item) {
            //    console.log(this.$session.get(SessionKeys.Cart)
            //    ...
            //}
        }
    }
</script>

import { set } from 'vue'

// initial state
const state = {
    list: {}
}

// getters
const getters = {
    list: state => state.list
}

// actions
const actions = {
    addToCart ({ dispatch, commit, state }, { data, ctx })
    {
        console.log(ctx.$session.get(SessionKeys.Cart))
        ...
    }
}

// mutations
const mutations = {
    ...
}

export default {
    state,
    getters,
    actions,
    mutations
}

Answer 2

您可以在商店顶部执行此操作

import Vue from 'vue’

const session = Vue.prototype.$session;

并在您的操作方法中执行此操作

console.log(session.get(SessionKeys.Cart))

这将有效