Vuex 如何访问组件挂载或创建挂钩上的状态数据?

Vuex how to Access state data on component mounted or created hook?

我正在尝试在使用 mounted() 挂钩加载组件后创建一个 Quill.js 编辑器实例。但是,我需要使用 Quill.setContents() 在同一个 mounted() 挂钩上使用我从 vuex.store.state 收到的数据来设置 Quill 的内容

我的麻烦在于,每当我尝试访问组件 returns 状态数据时,它的值为空,无论是在 mounted() 还是 created() 钩子。我也尝试过使用吸气剂和计算属性。似乎没有任何效果。

我已经包含了我的 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>

顺便说一句,作为最后的手段,我已经尝试了 props 选项。但是,无论如何它都没有帮助我。对不起,如果这个问题太长。感谢您花时间阅读本文。祝你有美好的一天 ;)

我复制了您的代码并对其进行了测试(当然,我创建了自己的虚拟笔记,因此我可以删除获取请求)并且能够在页面上显示笔记。

我从你的代码中意识到了一些事情,你可能需要添加一个商店 属性 因为你的组件 ( test ) 中有些地方你正在引用它,但你只定义它'app' 组件。所以在这部分你的代码修改如下:

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

关键区别在于 'store' 属性 的定义。请注意,您所做的在应用程序组件中定义 "store" 属性 是正确的,但同样需要在 "test" 组件中定义,正如我在以上代码片段。

第二件事是,您正在使用 $store,我想这给您未定义,除非如您所说,在您包含的库中相应地解决了这个问题,但在我这边,我不得不删除所有对“$”的引用store" 并将其替换为 "store"(不带美元符号)。

最后,出于测试目的,我建议您也