javascript - vuex 使用dispatch 提示not found?

Question

引進了一個使用vuex流程的元件，提示disatch 呼叫的方法not found?

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

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

檔案引入的問題是對的， 為什麼會提示

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

實在不懂？ vuex剛入門求教？

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