如何从javascript文件(而不是vue组件)调度操作?

时间:2017-10-12 18:39:11

标签: vue.js vuejs2 vuex

我在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,
  });
}

1 个答案:

答案 0 :(得分:10)

首先,在 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实例的主文件或索引文件,您现在可能需要更改导入从导入创建功能到简单地导入商店。