Question

所以我正在尝试用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 }
})

Answer 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>

Answer 2

实际上我正在寻找这种方式：

msg: this.$store.state.nombre

（我缺少“ .state”部分）

Answer 3

除了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

您可以将其导入需要访问状态，获取器，操作和突变的任何位置。

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)

Answer 4

使用 vuex创建的方法呼叫您所在的州。

谢谢

不使用mapState调用vuex存储

4 个答案: