Level 8
found the solution , i leave it here might some one gets the same problem:
Oct 22, 2018
7
Level 8
How to add Vuex to Laravel Nova?
So i am working on a new Tool for Nova, and i need Vuex to make it work. Is there a way to add Vuex to laravel Nova?
I would usually just add it in the Vue instance:
store js:
import Vuex from 'vuex';
Vue.use(Vuex);
app.js:
import {store} from './store/store';
new Vue({
el: '#prm',
i18n,
store,
but in the tools.js component the Vue instance is already defined and this sadly doesnt work:
Nova.booting((Vue, router) => {
router.addRoutes([
{
name: 'voucher-editor',
path: '/voucher-editor',
component: require('./components/Tool'),
},
])
})
Vue.store = store;
Any one had a problem like this? How do you add in general new plugins to an existing Vue instance?
Level 2
Could you share a code snippit on how you used the Global Mixin to add the store to your vue instance?
Level 4
This is how I got it to work in my application
field.js
import Vuex from 'vuex';
Nova.booting((Vue, router) => {
Vue.use(Vuex);
Nova.store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
});
});
Then in your components you can access the data through Nova.store for example Nova.store.commit('increment') or Nova.store.state.count.
1 like
Level 1
Nova.store.state.count works in my components mehotds but i'm not able of render it in te template {{Nova.store.state.count} is not working for me
Level 1
I think this is out of date for newer versions of Nova; Vuex is available in your Tool.vue file via this.$store:
import { mapState } from 'vuex';
import * as waves from '../store/waves.js';
import _ from 'lodash';
export default {
props: ['resourceName', 'resourceId', 'panel'],
computed: {
...mapState(['waves']),
},
methods: {
updateWaves: _.debounce(function(waves) {
this.$store.dispatch('updateWaves', waves.waves);
}, 300),
},
mounted() {
this.$store.registerModule('waves', waves);
this.$store.dispatch('fetchWaves', this.resourceId);
},
}
1 like
Level 1
Hello , Is there any way to see your code ? I couldnt define vuex nova application. Can you tell me how did you register vuex ?
Level 5
Hi guys,
To others trying to create custom Nova 4 tools, be sure to perform npm run nova:install which adds the nova dependencies. Then for the question posed above, npm install vuex@next --save-dev and then inside of field.js:
import FormField from './components/FormField'
import Vuex from 'vuex';
Nova.booting((app, store) => {
app.use(Vuex); // Add this
app.component('form-stripe-checkout', FormField)
})
1 like
Please or to participate in this conversation.