Hey Stackoverflow community!
I've got a question regarding Vuex in a Laravel/Vue Project, that is also importing a custom Vue components library/package.
I'd like to have our package export certain pieces of Vuex state (state, mutations, getters, etc) that relate specifically to our package.
I'd like these pieces to work with our Laravel Project's Vuex Instance. The hope is that this would allow the project to use state pieces from the custom package, as well as state pieces specific to the Laravel project, in one Vuex Instance.
Is this possible or even a good approach? The package is meant to be re-usable and is not project-specific, but it would be ideal if the Laravel Project could read/manipulate/interact the package state from its own Vuex State.
Here are some relevant code snippets:
Custom Component Library - main.js
import ExampleComponent from './components/ExampleComponent.vue'
import AnotherComponent from './components/AnotherComponent.vue'
export {
ExampleComponent,
AnotherComponent
}
Laravel Project - app.js
import {ExampleComponent, AnotherComponent} from 'vue-components-library'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
filterData: {
page: 1
},
fetchResultsFlag: 0
},
mutations: {
updateFilterData: (state, filterData) => {
Object.entries(filterData).forEach(([key, value]) => {
state.filterData[key] = value
});
state.fetchResultsFlag = 1
},
incrementPage: (state) => {
state.filterData.page++
state.fetchResultsFlag = 1
},
resetFetchResultsFlag: (state) => {
state.fetchResultsFlag = 0
}
},
getters: {
filterData: state => {
return state.filterData
},
fetchResultsFlag: state => {
return state.fetchResultsFlag
},
page: state => {
return state.filterData.page
}
}
})
const app = new Vue({
el: '#app',
store: store
});
Any help or insight is greatly appreciated!
Thanks.