Vuex不装载

Question

我已经把一种全新版本的Vuex装进了一台百拉威尔/vue。

我把商店导入app.js

import store from './store';

然后我在这里用它

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

然后在我的商店/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运行手表并将其全部构建完毕，我得到以下错误

“没有检测到Veux存储”

也是

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

在挂载钩子中出现错误："TypeError: this.$store.dispatch不是函数“

Answer 1

你可以这样用它。

在商店/帐户中

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

尤其是您错过了商店/index.js

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

Vue.use(Vuex);

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