javascript - Vuex-Eingabeaufforderungen bei Verwendung von Dispatch nicht gefunden?

Question

Eine Komponente mithilfe des Vuex-Prozesses eingeführt und darauf hingewiesen, dass die von „dispatch“ aufgerufene Methode nicht gefunden wurde?

Dateistore.js

/**
 * Vuex
 * http://vuex.vuejs.org/zh-cn/intro.html
 */
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const now = new Date();
const store = new Vuex.Store({
    state: {
        // 当前用户
        user: {
            name: 'coffce',
            img: 'dist/images/1.jpg'
        },
        // 会话列表
        sessions: [
            {
                id: 1,
                user: {
                    name: '示例介绍',
                    img: 'dist/images/2.png'
                },
                messages: [
                    {
                        content: 'Hello，这是一个基于Vue + Vuex + Webpack构建的简单chat示例，聊天记录保存在localStorge, 有什么问题可以通过Github Issue问我。',
                        date: now
                    }, {
                        content: '项目地址: https://github.com/coffcer/vue-chat',
                        date: now
                    }
                ]
            },
            {
                id: 2,
                user: {
                    name: 'webpack',
                    img: 'dist/images/3.jpg'
                },
                messages: []
            }
        ],
        // 当前选中的会话
        currentSessionId: 1,
        // 过滤出只包含这个key的会话
        filterKey: ''
    },
    mutations: {
        INIT_DATA (state) {
            let data = localStorage.getItem('vue-chat-session');
            if (data) {
                state.sessions = JSON.parse(data);
            }
        },
        // 发送消息
        SEND_MESSAGE ({ sessions, currentSessionId }, content) {
            let session = sessions.find(item => item.id === currentSessionId);
            session.messages.push({
                content: content,
                date: new Date(),
                self: true
            });
        },
        // 选择会话
        SELECT_SESSION (state, id) {
            state.currentSessionId = id;
        } ,
        // 搜索
        SET_FILTER_KEY (state, value) {
            state.filterKey = value;
        }
    }
});

store.watch(
    (state) => state.sessions,
    (val) => {
        console.log('CHANGE: ', val);
        localStorage.setItem('vue-chat-session', JSON.stringify(val));
    },
    {
        deep: true
    }
);

export default store;
export const actions = {
    initData: ({ dispatch }) => dispatch('INIT_DATA'),
    sendMessage: ({ dispatch }, content) => dispatch('SEND_MESSAGE', content),
    selectSession: ({ dispatch }, id) => dispatch('SELECT_SESSION', id),
    search: ({ dispatch }, value) => dispatch('SET_FILTER_KEY', value)
};

Datei chat.js

<script>
import { actions } from '../../vuex/store';

import Card from '../../components/card';
import List from '../../components/list';
import Text from '../../components/text';
import Message from '../../components/message';

export default {
    components: { Card, List, Text, Message },
    vuex: {
        actions: actions
    },
    created () {
        this.initData();
    }
}
</script>

<template>
<p id="app">
    <p class="sidebar">
        <card></card>
        <list></list>
    </p>
    <p class="main">
        <message></message>
        <text></text>
    </p>
</p>
</template>

<style lang="less" scoped>
#app {
    margin: 20px auto;
    width: 800px;
    height: 600px;

    overflow: hidden;
    border-radius: 3px;

    .sidebar, .main {
        height: 100%;
    }
    .sidebar {
        float: left;
        width: 200px;
        color: #f4f4f4;
        background-color: #2e3238;
    }
    .main {
        position: relative;
        overflow: hidden;
        background-color: #eee;
    }
    .text {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
    }
    .message {
        height: ~'calc(100% - 160px)';
    }
}
</style>

Das durch die Datei verursachte Problem ist korrekt. Warum wird es dazu aufgefordert?

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Text
warn
(unknown) [Vue warn]: Error in created hook: "TypeError: this.initData is not a function"

found in

---> <Chat> at /banli/webchat/resources/vue-admin/src/views/webchat/chat.vue
       <ElCol>... (1 recursive calls)
         <ElRow>
           <Home> at /banli/webchat/resources/vue-admin/src/views/Home.vue
             <App> at /banli/webchat/resources/vue-admin/src/App.vue
               <Root>
warn
(unknown) TypeError: this.initData is not a function
    at VueComponent.created (eval at <anonymous> (app.js:6791), <anonymous>:33:14)
    at callHook (eval at <anonymous> (app.js:772), <anonymous>:2557:21)
    at VueComponent.Vue._init (eval at <anonymous> (app.js:772), <anonymous>:4001:5)
    at new VueComponent (eval at <anonymous> (app.js:772), <anonymous>:4170:12)
    at createComponentInstanceForVnode (eval at <anonymous> (app.js:772), <anonymous>:3519:10)
    at init (eval at <anonymous> (app.js:772), <anonymous>:3353:45)
    at createComponent (eval at <anonymous> (app.js:772), <anonymous>:4902:9)
    at createElm (eval at <anonymous> (app.js:772), <anonymous>:4845:9)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:772), <anonymous>:5343:9)
    at VueComponent.Vue._update (eval at <anonymous> (app.js:772), <anonymous>:2324:19)
handleError
(unknown) [Vue warn]: Property or method "user" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in
·····

Wirklich nicht verstanden? Neu bei vuex und brauchen Rat?

Answer 1

chat.js 中，我好像没见过这个用法：

vuex: {
    actions: actions
}

改成下面这种方式应该就可以了

methods: {
    ...actions
}

顺便贴个 vuex 官方关于组件中分发 action 的文档 https://vuex.vuejs.org/zh-cn/...，感觉楼主用的姿势不对

Answer 2

disatch 是用来调用action的，调用mutation要用commit

export const actions = {
    initData: ({ commit }) => commit('INIT_DATA'),
    sendMessage: ({ commit }, content) => commit('SEND_MESSAGE', content),
    selectSession: ({ commit }, id) => commit('SELECT_SESSION', id),
    search: ({ commit }, value) => commit('SET_FILTER_KEY', value)
};