Question

我正在寻找一种方法来从另一个不是单个文件组件的文件中调用商店中的变异。

此文件负责管理axios配置以能够进行一些API调用。我管理了一些拦截器，我想调用一个变种来更改通知存储的状态以在UI中显示通知。

import axios from "axios";
import i18n from './i18n';
import Vue from 'vue';

// Define global param object for notification options
const options = {
    type: "danger"
};

// Create global Axios instance for CTC Backends API calls
const instance = axios.create({
    baseURL: process.env.VUE_APP_BACKEND_URL,
});

// Define interceptor for responses to handle certain API responses
instance.interceptors.response.use(res => {
    console.log('axiosBackend::ResponseInterceptor()', res);
    return res;
}, error => {

    if (!error.response) {

        Vue.$store.commit("SHOW_NOTIFICATION", {
            text: i18n.t("serverError"),
            type: 'error'
        });

    } 

    return Promise.reject(error.response);

});

export default instance;

Answer 1

如果我正确理解您的问题。您必须导入商店实例并使用它来调用变异。

import store from '@/store'
...
store.commit("SHOW_NOTIFICATION", {
...

Answer 2

如果要从另一个文件调用变异，这很简单：

您可以具有以下结构

└───src     │
    │
    │
    └───店     ││index.js     ││getters.js     ││actions.js     ││突变     ││mutation-types.js

例如在mutations.js中：

const mutations = {}

export default mutations

在index.js中

import Vue from 'vue'
import Vuex from 'vuex'

import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const state = {}

const store = {
    state,
    getters,
    mutations,
    actions
}

export default new Vuex.Store(store)

Answer 3

import {store} from './store';

store.commit("SHOW_NOTIFICATION", paylo )

VueX / VueJS：来自另一个文件的呼叫突变

3 个答案: