如何从 javascript 文件(而不是 vue 组件)调度动作?
How to dispatch action from a javascript file (instead of a vue component)?
我在 vue 上下文之外有一个模块(javascript 文件)。我需要从这个 javascript 文件中发送动作。可能吗 ?如果是,那怎么办?
jsfile.js(Javascript 文件)
const detail = {};
detail.validateLocation = (location) => {
// need to dispatch one action from here.
// dispatch('SET_LOCATION', {city: 'California'})
// how to dispatch action ?
}
export default detail;
action.js
export default {
SET_LOCATION: ({ commit}, data) => {
commit('SET_LOCATION', data);
},
}
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';
export function createStore() {
return new Vuex.Store({
modules: {},
state: {
location: null
},
actions,
mutations,
getters,
});
}
首先,在store.js.
中创建商店
import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';
const store = new Vuex.Store({
modules: {},
state: {
location: null
},
actions,
mutations,
getters,
});
export default store
然后,将商店导入jsfile.js并使用它。
import store from "./store"
const detail = {};
detail.validateLocation = (location) => {
// Use imported store
store.dispatch('SET_LOCATION', {city: 'California'})
}
export default detail;
假设您有一个创建 Vue 实例的主文件或索引文件,您现在可能需要将导入从导入创建函数更改为仅导入商店。
我在 vue 上下文之外有一个模块(javascript 文件)。我需要从这个 javascript 文件中发送动作。可能吗 ?如果是,那怎么办?
jsfile.js(Javascript 文件)
const detail = {};
detail.validateLocation = (location) => {
// need to dispatch one action from here.
// dispatch('SET_LOCATION', {city: 'California'})
// how to dispatch action ?
}
export default detail;
action.js
export default {
SET_LOCATION: ({ commit}, data) => {
commit('SET_LOCATION', data);
},
}
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';
export function createStore() {
return new Vuex.Store({
modules: {},
state: {
location: null
},
actions,
mutations,
getters,
});
}
首先,在store.js.
中创建商店import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';
const store = new Vuex.Store({
modules: {},
state: {
location: null
},
actions,
mutations,
getters,
});
export default store
然后,将商店导入jsfile.js并使用它。
import store from "./store"
const detail = {};
detail.validateLocation = (location) => {
// Use imported store
store.dispatch('SET_LOCATION', {city: 'California'})
}
export default detail;
假设您有一个创建 Vue 实例的主文件或索引文件,您现在可能需要将导入从导入创建函数更改为仅导入商店。