如何避免在 Vue 中一直写 this.$store.state.donkey？

Question

我正在学习 Vue，我发现我到处都有或多或少的语法。

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

一直写 this.$store.state.donkey 很痛苦，而且它也降低了可读性。我感觉到我正在以一种不太理想的方式来做这件事。我应该如何参考商店的状态？

Answer 1

您可以为状态和吸气剂设置计算属性，即

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
        }),

现在，如果您查看 this.isMyAss，您会发现它...您的 ass

worth noting here that getters, mutations & actions are global - therefore they are referenced directly on your store, i.e. store.getters, store.commit & store.dispatch respectively. This applies whether they are in a module or in the root of your store. If they are in a module check out namespacing to prevent overwriting previously used names: vuex docs namespacing. However if you are referencing a modules state, you must prepend the name of the module, i.e. store.state.user.firstName in this example user is a module.

编辑 23/05/17

自从编写 Vuex 以来，它的命名空间功能现在已成为您使用模块时的必备工具。只需将 namespace: 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',
    }),
    ...

这使得模块使用起来非常简单和干净，如果您将它们嵌套多层深度，这将是一个真正的救星：namespacing vuex docs

我整理了一个示例 fiddle 来展示您可以参考和使用 vuex 商店的各种方式：

JSFiddle Vuex Example

或查看以下内容：

const userModule = {

 state: {
        firstName: '',
        surname: '',
        loggedIn: false,
    },
    
    // @params state, getters, rootstate
    getters: {
     fullName: (state, getters, rootState) => {
         return `${state.firstName} ${state.surname}`
        },
        userGreeting: (state, getters, rootState) => {
         return state.loggedIn ? `${rootState.greeting} ${getters.fullName}` : 'Anonymous'
        },
    },
    
    // @params state
    mutations: {
        logIn: state => {
         state.loggedIn = true
        },
        setName: (state, payload) => {
         state.firstName = payload.firstName
         state.surname = payload.surname
        },
    },
    
    // @params context
    // context.state, context.getters, context.commit (mutations), context.dispatch (actions)
    actions: {
     authenticateUser: (context, payload) => {
         if (!context.state.loggedIn) {
          window.setTimeout(() => {
                 context.commit('logIn')
                 context.commit('setName', payload)
                }, 500)
            }
        },
    },
    
}


const store = new Vuex.Store({
    state: {
        greeting: 'Welcome ...',
    },
    mutations: {
        updateGreeting: (state, payload) => {
         state.greeting = payload.message
        },
    },
    modules: {
     user: userModule,
    },
})


Vue.component('vuex-demo', {
 data () {
     return {
         userFirstName: '',
         userSurname: '',
        }
    },
 computed: {
    
        loggedInState () {
         // access a modules state
            return this.$store.state.user.loggedIn
        },
        
        ...Vuex.mapState([
         'greeting',
        ]),
        
        // access modules state (not global so prepend the module name)
        ...Vuex.mapState({
         firstName: state => state.user.firstName,
         surname: state => state.user.surname,
        }),
        
        ...Vuex.mapGetters([
         'fullName',
        ]),
        
        ...Vuex.mapGetters({
         welcomeMessage: 'userGreeting',
        }),
        
    },
    methods: {
    
     logInUser () {
         
            this.authenticateUser({
             firstName: this.userFirstName,
             surname: this.userSurname,
            })
         
        },
    
     // pass an array to reference the vuex store methods
        ...Vuex.mapMutations([
         'updateGreeting',
        ]),
        
        // pass an object to rename
        ...Vuex.mapActions([
         'authenticateUser',
        ]),
        
    }
})


const app = new Vue({
    el: '#app',
    store,
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">

    <!-- inlining the template to make things easier to read - all of below is still held on the component not the root -->
    <vuex-demo inline-template>
        <div>
            
            <div v-if="loggedInState === false">
                <h1>{{ greeting }}</h1>
                <div>
                    <p><label>first name: </label><input type="text" v-model="userFirstName"></p>
                    <p><label>surname: </label><input type="text" v-model="userSurname"></p>
                    <button :disabled="!userFirstName || !userSurname" @click="logInUser">sign in</button>
                </div>
            </div>
            
            <div v-else>
                <h1>{{ welcomeMessage }}</h1>
                <p>your name is: {{ fullName }}</p>
                <p>your firstName is: {{ firstName }}</p>
                <p>your surname is: {{ surname }}</p>
                <div>
                    <label>Update your greeting:</label>
                    <input type="text" @input="updateGreeting({ message: $event.target.value })">
                </div>
            </div>
        
        </div>        
    </vuex-demo>
    
</div>

如您所见，如果您想引入突变或动作，这将以类似的方式完成，但在您的方法中使用 mapMutations 或 mapActions

添加混合

要扩展上述行为，您可以将其与 mixin 结合使用，然后您只需设置一次上述计算属性，然后在需要它们的组件上引入 mixin：

animals.js（混合文件）

import { mapState, mapGetters } from 'vuex'

export default {

    computed: {

       ...mapState([
           'donkey',
           ...

你的组件

import animalsMixin from './mixins/animals.js'

export default {

    mixins: [
        animalsMixin,
    ],

    created () {

        this.isDonkeyAnAss = this.donkey === this.ass
        ...

如何避免在 Vue 中一直写 this.$store.state.donkey？

How to avoid the need of writing this.$store.state.donkey all the time in Vue?

javascript

vue.js

vuex