Vuex $ 상태 문제

Question

나는 다음과 같은 오류가 있습니다. JS

import Vue from 'vue' 
import App from './App' 
import store from './store' 

new Vue({ 
    el: "#app", 
    store, 
    render: h => h(App) 
}) 

store.js :

import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex) 

export const store = new Vuex.Store({ 
    state: { 
    users: [ 
     {id: 1, name: 'Adrian', email: 'adrian@email.pl'}, 
     {id: 2, name: 'Magda', email: 'magda@email.pl'} 
    ] 
    } 
}) 

내 구성 요소를 사용하여 $ 가기 :

<template> 
    <div class="usersNames"> 
    <ul> 
     <li v-for="user in usersNames">{{user.name}}</li> 
    </ul> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'usersNames', 
    computed: { 
     usersNames() { 
     return this.$store.state.users; 
     } 
    } 
    } 
</script> 

Answer 1

작동해야처럼 예 보이지만, 내가 개선 될 것이라고 생각하고 또한 당신의 문제를 해결해야 다른 전략을 제공하고 싶습니다.

구성 요소에서 액세스하려는 데이터의 저장소에 getter를 만듭니다.

그래서 여기에 상점을 변경

import Vue from 'vue' 
import Vuex from 'vuex' 

    Vue.use(Vuex) 

    export const store = new Vuex.Store({ 
    state: { 
     users: [ 
     {id: 1, name: 'Adrian', email: 'adrian@email.pl'}, 
     {id: 2, name: 'Magda', email: 'magda@email.pl'} 
     ] 
    }, 
    getters:{ 
     users: state => return state.users 
    } 
    }); 

그런 다음, 구성 요소, 사용자를 얻기 위해 그 게터를 사용합니다.

<script> 
export default { 
    name: 'usersNames', 
    computed: { 
    usersNames() { 
     return this.$store.getters.users 
    } 
    } 
} 
</script> 

Answer 2

vuex가 vue에 제대로 삽입되지 않은 것으로 보입니다.

귀하의 질문과 관련이 없을 수도 있지만 모범 사례를 위해 mapState 도우미를 사용하는 것이 더 좋습니다. 구성 요소에서
:

import { mapState } from 'vuex' 

export default { 
    name: 'usersNames', 
    computed: { 
    ...mapState({ 
     usersNames: 'users' 
    }), 
    yourLocalComputed() {} 
    } 
} 

Answer 3

당신은 main.js을 변경할 수 있습니다 : './store'에서 가져 오기 {저장}을 (를);