이 글을 쓰는 것을 피하는 방법.$store.state.donkey는 Vue에서 항상?

이 글을 쓰는 것을 피하는 방법.$store.state.donkey는 Vue에서 항상?

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가독성도 떨어집니다.나는 내가 그것을 최적이 아닌 방법으로 하고 있다는 것을 느낀다.매장 상황을 어떻게 설명하면 좋을까요?

상태와 getter 모두에 대해 계산된 속성을 설정할 수 있습니다.

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

일단 VM 상의 당나귀나 당나귀를 참조할 수 있게 되면 $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

getters, modiations, actions는 글로벌하기 때문에 스토어에서 직접 참조할 수 있습니다.store.getters,store.commit&store.dispatch각각 다음과 같다.이는 모듈 내 또는 스토어의 루트에 있는 경우에도 적용됩니다.모듈에 있는 경우 이전에 사용한 이름(vuex docs 이름)을 덮어쓰지 않도록 네임스페이스를 확인합니다.단, 모듈 상태를 참조하는 경우 모듈 이름 앞에 추가되어야 합니다.store.state.user.firstName이 예에서는user는 모듈입니다.

---

17년 5월 23일 편집

Vuex 쓰기 시간이 업데이트되고 네임스페이스 기능이 모듈 작업 시 사용할 수 있게 되었습니다.간단하게 추가namespace: true모듈 내보내기, 즉

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

를 추가하다foovuex 스토어 모듈:

# 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 docs를 네스트할 경우 매우 편리합니다.

---

vuex 스토어에서 참조 및 작업할 수 있는 다양한 방법을 소개하기 위해 예제 바이올린을 준비했습니다.

JSFiddle Vuex의 예

또는 다음 항목을 확인하십시오.

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을 필요로 하는 컴포넌트에서 mixin을 가져오면 됩니다.

animals.module (파일 내의 파일)

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

언급URL : https://stackoverflow.com/questions/40909576/how-to-avoid-the-need-of-writing-this-store-state-donkey-all-the-time-in-vue