Vuex没有加载答案

【问题标题】：Vuex not loadingVuex没有加载
【发布时间】：2021-07-06 18:45:29
【问题描述】：

我已将全新版本的 Vuex 安装到 laravel/vue 设置中

我将商店导入 app.js

import store from './store';

然后我在这里使用它

const app = new Vue({
    el: '#app',
    store,
    components: { App },
    router
});

然后在我的 store/index.js 文件中

// import dependency to handle HTTP request to our back end
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

//load Vuex
Vue.config.devtools = true;
Vue.use(Vuex);

//to handle state
const state = {
    videos: [],
    test: ''
}

//to handle state
const getters = {}

//to handle actions
const actions = {
    getVideos({commit}) {
        axios.post('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                commit('SET_POSTS', response.data)
            })
    }
}

//to handle mutations
const mutations = {
    SET_POSTS(state, payload) {
        state.videos = payload
    }
}

//export store module
export default {
    state,
    getters,
    actions,
    mutations
}

我认为运行 npm run watch 并构建它，我收到以下错误

'未检测到 Veux 存储'

还有

this.$store.dispatch('getVideos');

错误 [Vue 警告]：挂载钩子错误：“TypeError: this.$store.dispatch is not a function”

【问题讨论】：

奇怪的错误似乎有错字
在 vue 开发工具中对不起

标签： vue.js vuejs2 vuex

【解决方案1】：

你可以这样使用它。

在 store/account.js 中

import landlordService from '../service/landlord'
const landlord = JSON.parse(localStorage.getItem('landlord'));
const state = landlord
    ? {
        status: {
            loggedIn: true
        },
    }
    : {
        status: {},

    };


const actions = {
    login({commit}, { email, password }) {
        commit('loginRequest', { email });
        landlordService.auth( email, password)
            .then(landlord => {
                commit('loginSuccess', landlord);
            }).catch(() => {
                commit('loginFailure')
            })
    },
    logout({ commit }) {
        localStorage.removeItem('landlord')
        commit('logout');
    },
};
const mutations = {
    loginRequest(state, landlord) {
        state.status = { loggingIn: true };
        state.landlord = landlord;
    },
    loginSuccess(state, data) {
        state.status = { loggedIn: true };
        state.landlord = {
            id: data.id,
        };
    },
    loginFailure(state) {
        state.status = {};
        state.landlord = null;
    },
    logout(state) {
        state.status = {};
        state.landlord = null;
    },
};
export default {
    namespaced: true,
    state,
    actions,
    mutations
};

特别想念这里在 store/index.js 中

import Vue from 'vue';
import Vuex from 'vuex';
import account  from './account';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        account
    }
});

【讨论】：