How to use it with vuex store states
See original GitHub issueHi, Thank you for this library.
I want to ask you how can I use this library with vuex store state? As you know we should commit changes to store and do not manipulate them directly.
I used below code but it did not worked and set method of computed property did not called.
created() {
const $service = this.$dragula.$service
$service.options( 'discountList', { direction: 'vertical' } )
$service.eventBus.$on( 'dragend', (args) => {
this.discountList.forEach( ( value, index ) => {
value.ordering = index + 1;
});
this.saveDiscountsOrder();
} )
},
// Component computed properties.
computed : {
discountList : {
get : function() {
return this.$store.state.discountList;
},
set : function( value ) {
console.log( 'setting value' );
this.$store.commit( 'SET_CART_DISCOUNT_LIST', value );
}
}
}
// Template
<tbody class="container" v-dragula="discountList" drake="discountList">
<tr v-for="discount in discountList" v-bind:key="discount">
<td></td>
<td>{{ discount.id }}</td>
<td>{{ discount.name }}</td>
<td>{{ discount.start_date }}</td>
<td>{{ discount.end_date }}</td>
<td>
<button class="button button-primary" @click="deleteCartDiscount( discount.id )">{{ strings.delete }}</button>
<router-link :to="'/discount/' + discount.id" class="button button-primary">{{ strings.edit }}</router-link>
</td>
</tr>
</tbody>
I think that above code does not calls set method of computed property because of not setting a value like discountList = newValue
from dragula to discountList
.
Please let me know how can I solve this problem.
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (4 by maintainers)
Top Results From Across the Web
State - Vuex
Vuex uses a single state tree - that is, this single object contains all your application level state and serves as the "single...
Read more >How To Manage State in a Vue.js Application with Vuex
A Vuex store is a collection of different methods and data. Some of these methods, such as actions, can fetch and process data...
Read more >Vuex Tutorial - CodinGame
The only way to change the state in a Vuex store is by committing a mutation. We can directly change the state, but...
Read more >Vuex Store - codeburst
Vuex is a simple state management library for Vue js. It is very easy to use. It serves as a centralized store for...
Read more >How to get data from vuex state into local data for manipulation
Using the Vuex mapState helper ... You can also use getters instead of accessing the state directly. The de-facto approach is to use...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Ah yeah, pushed and published now with your example in examples folder. Cheers 😃
@codewp Added your example under
/examples
folder with a few more details and added link/section to README 😃 Cheers!