javascript - Les invites vuex sont introuvables lors de l'utilisation de dispatch ?

Question

Introduit un composant utilisant le processus vuex, indiquant que la méthode appelée par dispatch n'a pas été trouvée ?

Fichier store.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)
};

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

Le problème introduit par le fichier est correct, pourquoi est-il demandé

[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
·····

Vous ne comprenez vraiment pas ? Vous êtes nouveau sur vuex et avez besoin de conseils ?

Answer 1

Dans

chat.js, je ne semble pas avoir vu cette utilisation :

vuex: {
    actions: actions
}

Vous devriez pouvoir le modifier avec la méthode suivante

methods: {
    ...actions
}

Au fait, je publierai le document officiel de vuex sur la répartition des actions dans les composants https://vuex.vuejs.org/zh-cn/..., j'ai l'impression que la posture utilisée par l'affiche est fausse

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)
};