web-dev-qa-db-ja.com

（vueコンポーネントの代わりに）javascriptファイルからアクションをディスパッチする方法は？

vueコンテキストの外に1つのモジュール（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,
  });
}
vue.jsvuejs2vuex
10
Mukund Kumar

まず、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インスタンスを作成するメインファイルまたはインデックスファイルがあるとすると、インポートをcreate関数のインポートから単にストアのインポートに変更する必要があります。

14
Bert