javascript - vuex prompts not found when using dispatch?

Question

Introduced a component using the vuex process, prompting that the method called by dispatch was not found?

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

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

The problem introduced by the file is correct, why is it prompted

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

Really don’t understand? New to vuex and need advice?

Answer 1

In

chat.js, I don’t seem to have seen this usage:

vuex: {
    actions: actions
}

You should be able to change it to the following method

methods: {
    ...actions
}

By the way, I’ll post the official vuex document on distributing actions in components https://vuex.vuejs.org/zh-cn/..., I feel like the posture used by the poster is wrong

Answer 2

disatch is used to call action. To call mutation you need to use 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)
};