javascript - gesaan vuex tidak dijumpai semasa menggunakan dispatch?

Question

Memperkenalkan komponen menggunakan proses vuex, menyebabkan kaedah yang dipanggil melalui penghantaran tidak ditemui?

Stor fail.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)
};

Sembang fail.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>

Masalah yang diperkenalkan oleh fail adalah betul, mengapa ia digesa

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

Betul tak faham? Baru menggunakan vuex dan memerlukan nasihat?

Answer 1

Dalam

chat.js, saya nampaknya tidak pernah melihat penggunaan ini:

vuex: {
    actions: actions
}

Anda sepatutnya boleh menukarnya kepada kaedah berikut

methods: {
    ...actions
}

By the way, saya akan siarkan dokumen rasmi vuex tentang pengedaran tindakan dalam komponen https://vuex.vuejs.org/zh-cn/..., saya rasa postur yang digunakan oleh poster itu salah

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