使用 Vuex 从组件获取和编辑状态。 ReferenceError: $store 未定义

Question

我正在使用 Vuex 来存储一些数据。我正在尝试获取存储在 state 中的值，但我不知道如何从组件中检索它。

我想从如下所示的组件中加载 data 函数中的值。我可以使用this.$store.dispatch('currentUser/loginUser',this.user)成功保存一些数据，但我不知道如何获取。

这是 Vuex 模块的结构：

我要获取的数据在 loginSettings.js 文件中。我需要检索 closed 布尔值。这是文件里面的内容：

const state = {
    loginModal:{
        closed: false, // This is the value I need
    }
};
const getters = {};
const actions = {};
const mutations = {};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

这是我组件中的脚本标签。

<script>
  export default {
    data: () => ({
      dialog: this.$store.state.loginModal.closed, // This is throwing an error. The error is under this code block
      user:{
          email: "",
          password: ""
      }
    }),
    methods:{
        login(){
            this.$store.dispatch('currentUser/loginUser',this.user)
        }
    }

  }
</script>

错误：Error in data(): "ReferenceError: $store is not defined"

使用 Vuex 使组件的属性反应的正确方法是什么？

Answer 1

您忘记了this，因此它不是在 Vue 实例上查找 $store 变量，而是在全局范围内查找 $store 变量（未定义）。此外，对于命名空间模块，您需要在 this.$store.state 之后包含模块名称，因此 this.$store.state.loginSettings 是您尝试访问的状态对象。

但是，您希望将存储变量放在计算变量中，而不是数据中，以便它们在更改时进行更新。数据只是本地状态，因此它只会最初将您的本地状态设置为您的 vuex 存储中的状态，而不是响应式的。

因此，这应该是你的答案：

computed: {
  loginModal() {
    return this.$store.state.loginSettings.loginModal
  }
}

// or

computed: {
  closed() {
    return this.$store.state.loginSettings.loginModal.closed
  }
}

我建议不要将本地状态（组件是否已关闭或似乎不是特定于该组件）放在您的 vuex 存储中。

附：您可以import { mapState } from 'vuex' 并使用它为您自动生成计算属性，如下所示：

computed: {
  ...mapState('loginSettings', ['loginModal']),
}

Answer 2

将state 值直接分配给data 将引发错误。您可以改为在 computed 中调用它。

computed:{
  dialog:function(){
    return this.$store.state.loginModal.closed;
  }
}