Vuex 마운트되거나 생성된 후크에 대한 상태 데이터에 액세스하는 방법은 무엇입니까?

Vuex 마운트되거나 생성된 후크에 대한 상태 데이터에 액세스하는 방법은 무엇입니까?

마운트된() 후크를 사용하여 구성 요소가 로드되면 Quill.js 편집기 인스턴스를 생성하려고 합니다.그러나 vuex.store.state에서 받은 데이터와 동일한 마운트() 후크에 Quill.setContents()를 사용하여 Quill의 콘텐츠를 설정해야 합니다.

문제는 마운트된() 후크 또는 생성된() 후크에 관계없이 액세스를 시도할 때마다 구성 요소가 상태 데이터에 대한 빈 값을 반환한다는 것입니다.저는 게터로 시도해 보았고 속성도 계산했습니다.아무 것도 작동하지 않는 것 같습니다.

저는 제 entry.js 파일을 포함했고, 모든 구성 요소를 연결하여 당신이 저를 도와줄 수 있도록 했습니다.

Vue.component('test', {
    template: 
    `
        <div>
            <ul>
                <li v-for="note in this.$store.state.notes">
                    {{ note.title }}
                </li>
            </ul>
            {{ localnote }}
            <div id="testDiv"></div>
        </div>
    `,
    props: ['localnote'],
    data() {
        return {
            localScopeNote: this.localnote,
        }
    },
    created() {
        this.$store.dispatch('fetchNotes')
    },
    mounted() {
        // Dispatch action from store
        var quill = new Quill('#testDiv', {
            theme: 'snow'
        });
        // quill.setContents(JSON.parse(this.localnote.body));

    },
    methods: {
        setLocalCurrentNote(note) {
            console.log(note.title)
            return this.note = note;
        }
    }
});

const store = new Vuex.Store({
    state: {
        message: "",
        notes: [],
        currentNote: {}
    },
    mutations: {
        setNotes(state,data) {
            state.notes = data;
            // state.currentNote = state.notes[1];
        },
        setCurrentNote(state,note) {
            state.currentNote = note;
        }
    },
    actions: {
        fetchNotes(context) {
            axios.get('http://localhost/centaur/public/api/notes?notebook_id=1')
                    .then( function(res) {
                        context.commit('setNotes', res.data);
                        context.commit('setCurrentNote', res.data[0]);
                    });
        }
    },
    getters: {
        getCurrentNote(state) {
            return state.currentNote;
        }
    }
});

const app = new Vue({
    store
}).$mount('#app');

다음은 구성 요소를 렌더링하는 index.html 파일입니다.

<div id="app">
    <h1>Test</h1>
    <test :localnote="$store.state.currentNote"></test>
</div>

그나저나, 나는 마지막 수단으로 소품 옵션을 시도해 보았습니다.하지만, 그것은 어쨌든 저에게 도움이 되지 않았습니다.질문이 너무 길면 죄송합니다.시간을 내어 이 글을 읽어주셔서 감사합니다.좋은 하루 되세요 ;)

저는 당신의 코드를 복사하고 테스트했습니다(물론 저는 get request를 제거할 수 있도록 저만의 더미 노트를 만들었습니다). 그리고 저는 노트를 페이지에 표시할 수 있었습니다.

코드에서 깨달은 몇 가지 사항은 구성 요소(테스트)에 참조하는 위치가 있지만 '앱' 구성 요소에만 정의되므로 스토어 속성을 추가해야 할 수 있습니다.따라서 코드의 이 섹션에서 아래와 같이 수정합니다.

props: ['localnote'],
    data() {
        return {
            localScopeNote: this.localnote,
            store : store
        }
    },

주요 차이점은 '스토어' 속성의 정의입니다.앱 구성 요소에서 "스토어" 속성을 정의하는 작업은 올바르지만 위의 코드 조각에서 보여드린 대로 "테스트" 구성 요소에서도 동일하게 정의해야 합니다.

두 번째는 당신이 $store를 사용하고 있다는 것입니다. 당신이 말한 것처럼 이것을 포함한 라이브러리에서는 그에 따라 해결되지만, 제 입장에서는 "$store"에 대한 모든 참조를 제거하고 "store"(달러 기호 없이)로만 대체해야 했습니다.

마지막으로 테스트 목적으로, 저는 당신에게 또한 조언하고 싶습니다.

언급URL : https://stackoverflow.com/questions/43019024/vuex-how-to-access-state-data-on-component-mounted-or-created-hook