在没有 mapState 的情况下调用 vuex 存储答案

【问题标题】：Call vuex store without mapState在没有 mapState 的情况下调用 vuex 存储
【发布时间】：2019-01-09 05:57:40
【问题描述】：

所以我正在试验一个用 vue cli 创建的新项目，我在其中使用路由器和 VueX

所以在我的 HelloWorld.vue 文件中，我在脚本部分有这段代码：

import { mapState } from 'vuex'

export default {
  name: 'hello',
   computed: mapState({
    msg: 'nombre'
  }),

有没有更直接的方式调用状态中的值？例如我想做的事

msg: store.nombre

我的 vuex 存储在根 main.js 中定义如下：

//vuex
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    nombre: "POS vuex"
  }  
});

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

一旦您使用 mapState 作为计算值，您实际上可以在该组件中使用 this 调用这些状态 - 在模板或脚本部分：

在您的mapState 上使用... 运算符，您就完成了：

例子：

您的商店：

const store = new Vuex.Store({
  state: {
    nombre: "POS vuex",
    otherState: "abc",
    anotherState: "efg"
  }  
});

你的组件：

<template>
  <div id="test">
    {{ nombre }}
    {{ otherState }}
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'hello',
   methods: {
     logState() {
       console.log(this.anotherState);
     }
   },
   computed: {
     ...mapState(["nombre", "otherState", "anotherState"]),
   }
}
</script>

【讨论】：

【解决方案2】：

其实我一直在寻找这种方式：

msg: this.$store.state.nombre

（我错过了“.state.”部分）

【讨论】：

【解决方案3】：

在 vuex 的 created 方法中调用你的状态。

谢谢

【讨论】：

【解决方案4】：

除了mapState helper

computed: {
  ...mapState('moduleOne', ['keyOne', 'keyTwo'])
}

它允许您通过组件内的this.keyOne 和this.keyTwo 访问值。

您还可以将您的商店添加到 root vue instance 并通过全局 this.$store 指令访问您的组件内的状态。

this.$store.module.keyOne
this.$store.module.keyTwo

此外，如果您需要从组件外部访问商店，您还可以导出商店并直接从非组件代码中导入。

如果您导出商店：

import Vue from 'vue'
import Vuex from 'vuex'
import moduleTwo from './modules/moduleOne'
import moduleOne from './modules/moduleTwo'

Vue.use(Vuex)

const store = new Vuex.Store({
  strict: true,
  modules: {
    moduleOne,
    moduleTwo
  }
})

export default store

您可以在需要访问状态、getter、动作和突变的任何地方导入它。

import store from '@/store'

console.log(store.state.moduleOne.keyone)
store.dispatch('moduleOne/actionOne', { keyOne: valOne })
store.getters['moduleOne/getterOne']
store.commit('moduleOne/mutationOne', data)

【讨论】：