- I developed a plugin that utilizes Vuex for state management.
// plugin.js
import Vuex from "vuex";
import store from "./store.js";
export default {
install(Vue, options) {
const storeInstance = new Vuex.Store(store);
Vue.prototype.$store = storeInstance;
}
};
- Within this plugin, I import a store object.
// store.js
export default {
actions: {
SOME_RANDOM_ACTION({ state, commit }) {
console.log("some random action");
}
}
};
Dispatching actions and accessing state are functioning correctly.
However, when integrating this plugin into another Vue instance with Vuex, the store object resets with a new state.
// index.js
import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";
import plugin from "./plugin.js";
Vue.use(Vuex);
Vue.use(plugin);
new Vue({
// WARNING: When uncommented, Vuex re-initializes with a new object
// store: new Vuex.Store({ state: { hello: "hix" } }),
components: {
App
}
}).$mount("#app");
Uncommenting the store initialization results in the plugin's defined store becoming unavailable.
Currently, I am considering the following solutions:
- Exporting the plugin's store object to the main app file (index.js) and using it as a module.
- Exploring alternative state management solutions.
Is there a way to effectively utilize Vuex within my plugin?
https://codesandbox.io/s/vibrant-sanne-67yej?file=/src/main.js:0-371