question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use it with vuex store states

See original GitHub issue

Hi, 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:closed
  • Created 6 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
kristianmandrupcommented, Oct 14, 2017

Ah yeah, pushed and published now with your example in examples folder. Cheers 😃

1reaction
kristianmandrupcommented, Oct 13, 2017

@codewp Added your example under /examples folder with a few more details and added link/section to README 😃 Cheers!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found