Javascript 如何避免在Vue中一直编写此$store.state.aduck？

我正在学习Vue，我注意到我几乎到处都有以下语法

export default {
  components: { Navigation, View1 },
  computed: {
    classObject: function() {
      return {
        alert: this.$store.state.environment !== "dev",
        info: this.$store.state.environment === "dev"
      };
    }
  }
}

---

一直写这个.store.state.ad驴是件痛苦的事，而且它也降低了可读性。我感觉到我在以一种不太理想的方式做这件事。我应该如何引用存储的状态？

您可以为两种状态和getter设置计算属性，即

computed: {
    donkey () {
        this.$store.state.donkey
    },
    ass () {
        this.$store.getters.ass
    },
    ...

当你仍然需要调用$state.store时，你可以在你的虚拟机上引用一头驴或一头驴

为了让事情变得更简单，你可以使用vuex地图助手来找到你的屁股。。。或驴子：

import { mapState, mapGetters } from 'vuex'

default export {

    computed: {

        ...mapState([
            'donkey',
        ]),

        ...mapGetters([
            'ass',
        ]),

        ...mapGetters({
            isMyAss: 'ass', // you can also rename your states / getters for this component
        }),

现在如果你看一下

这个.ismyas

你会发现它。。。你的

ass

这里值得注意的是，getter、translation和action是全局的，因此它们直接在您的存储上引用，即分别是

store.getter

、

store.commit

、

store.dispatch

。这适用于它们是在模块中还是在存储的根目录中。如果它们位于模块中，请签出名称空间以防止覆盖以前使用的名称：。但是，如果您引用的是模块状态，则必须在模块名称前面加上前缀，即在本例中，

user

是一个模块

---

2017年5月23日编辑

自编写Vuex时起，Vuex已经更新，其名称空间功能现在是使用模块时的首选功能。只需将

名称空间：true

添加到您的模块导出，即

# vuex/modules/foo.js
export default {
  namespace: true,
  state: {
    some: 'thing',
    ...

将

foo

模块添加到vuex存储：

# vuex/store.js
import foo from './modules/foo'

export default new Vuex.Store({

  modules: {
    foo,
    ...

然后，当您将此模块拉入组件时，您可以：

export default {
  computed: {
    ...mapState('foo', [
      'some',
    ]),
    ...mapState('foo', {
      another: 'some',
    }),
    ...

这使得模块使用起来非常简单和干净，如果您将其嵌套到多个层次，这将是一个真正的救世主：

---

我制作了一个提琴示例，展示了您可以参考和使用vuex商店的各种方式：

# vuex/store.js
import foo from './modules/foo'

export default new Vuex.Store({

  modules: {
    foo,
    ...

或者查看以下内容：

const userModule={
声明：{
名字：''，
姓：''，
洛格丁：错，
},
//@params-state、getter、rootstate
吸气剂：{
全名：（state、getter、rootState）=>{
返回`${state.firstName}${state.names}`
},
userGreeting:（state、getter、rootState）=>{
return state.loggedIn？`${rootState.greeting}${getters.fullName}`:'匿名'
},
},
//@params状态
突变：{
登录：状态=>{
state.loggedIn=true
},
setName：（状态，有效负载）=>{
state.firstName=payload.firstName
state.name=payload.name
},
},
//@params上下文
//context.state、context.getter、context.commit（突变）、context.dispatch（操作）
行动：{
authenticateUser：（上下文，有效负载）=>{
if（！context.state.loggedIn）{
window.setTimeout（（）=>{
commit（'logIn'）
commit（'setName'，有效负载）
}, 500)
}
},
},
}
const store=新的Vuex.store({
声明：{
问候语：“欢迎……”，
},
突变：{
updateGreeting：（状态，有效负载）=>{
state.greeting=payload.message
},
},
模块：{
用户：userModule，
},
})
Vue.component（'vuex-demo'{
数据（）{
返回{
userFirstName:“”，
用户名：“”，
}
},
计算：{
loggedInState（）{
//访问模块状态
返回此项。$store.state.user.loggedIn
},
…Vuex.mapState([
“问候语”，
]),
//访问模块状态（非全局，因此请在模块名称前加上前缀）
…Vuex.mapState({
firstName:state=>state.user.firstName，
姓氏：state=>state.user.name，
}),
…Vuex.mapGetters([
“全名”，
]),
…Vuex.mapGetters({
welcomeMessage:'用户问候'，
}),
},
方法：{
登录用户（）{
这是验证者({
firstName:this.userFirstName，
姓：this.username，
})
},
//传递数组以引用vuex存储方法
…Vuex.Map([
“updateGreeting”，
]),
//传递要重命名的对象
…Vuex.mapActions([
“认证者”，
]),
}
})
const app=新的Vue({
el:“#应用程序”，
商店，
})

{{问候语}
名字：

姓：

登录
{{welcomeMessage}}
你的名字是：{{fullName}

您的名字是：{{firstName}

你的姓是：{{姓}

更新您的问候语：

驴子同义词的应用非常顺利，肯定+1，哈哈哈。模块状态图助手速记格式怎么样？我无法让它工作，状态不是全局的，因此您必须将其引用为state.module，这对于帮助程序来说并没有太大帮助。@ZhanKaribzhanov如果您使用Vuex名称空间，那么您可以在

…mapState（）

中非常轻松地访问嵌套的模块，我将在上面添加一点