Vuex 未加载

Question

我已经将全新版本的 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 运行观察并构建它，我得到以下错误

'No Veux store detected'

还有

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

错误 [Vue warn]: 挂载钩子出错: "TypeError: this.$store.dispatch is not a function"

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

Vuex 未加载

Vuex not loading

vue.js

vuex

vuejs2