No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [vuex] do not mutate vuex store state outside mutation handlers.

    Help
    3
    5
    2989
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      fakedrpanda last edited by

      I’m using a q-table to display some data in a table. The data is saved in a vuex store and its giving me an error everytime I change the values with the pop up edit.

      Error: [vuex] do not mutate vuex store state outside mutation handlers.
      
      Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."
      

      How do I properly update the data in the store?

      Here is the code for the table:

      <template>
          <div >
              <q-table
                  :grid="$q.screen.xs"
                  class="mytable q-mb-md"
                  :title="getFileName"
                  :data="getData"
                  :columns="columns"
                  :row-key="this.getRowKey()"
                  :filter="filter"
                  :selection="this.turnSelectOn()"
                  :selected.sync="selected"
                  :visible-columns="getColumnNames"
                  virtual-scroll
                  :rows-per-page-options="[15, 25, 30, 50, 0]"
              >
                  <template v-slot:top-right>
                      <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
                      <template v-slot:append>
                          <q-icon name="search" />
                      </template>
                      </q-input>
                  </template>
                  <template v-slot:body="props">
                      <q-tr :props="props">
                          <q-td 
                              v-for="(column) in props.cols"
                              :key="column.name" :props="props"
                              no-hover>
                              {{ props.row[column.name]}}
                              <q-popup-edit v-model="props.row[column.name]">
                              <q-input v-model="props.row[column.name]" dense autofocus counter />
                              </q-popup-edit>
                          </q-td>
                      </q-tr>
                  </template>
              </q-table>
          </div>
      </template>
      
      <script>
      import { mapGetters } from 'vuex';
      
      export default {
          name : 'OrderTable',
          computed:{
            ...mapGetters('newdata', ['getData', 'getFileName', 'getColumnNames'])
          },
          data(){
              return{
                  filter: '',
                  selected: [],
                  columns: this.$store.state.newdata.columns,
              }
          },
          methods: {
              getRowKey(){
      
                  const index = this.$store.state.newdata.metadata.requiredColumns.idColumn
                  return index
              },
              turnSelectOn(){
      
                  let selectState = 'none';
      
                  if(this.$store.state.newdata.metadata.requiredColumns.idColumn){
                      selectState = 'single'
                  }
      
                  return selectState
              }
          }
      }
      </script>
      
      <style lang="scss">
          .mytable{
              height: 500px; 
      
              .q-table__top,
              .q-table__bottom,
              thead tr:first-child th {
                  /* bg color is important for th; just specify one */
                  background-color: $secondary;
      
              }
      
              .q-table__top{
                  .q-field__control-container{
                      background-color: white;
                  }
              }
      
              thead tr th {
                  position: sticky;
                  z-index: 1;
              }
      
              thead tr:first-child th {
                  top: 0;
              }
      
              .q-table--loading thead tr:last-child th {
                  /* height of all previous header rows */
                  top: 48px;
      
                  tr:nth-child(2n) {
                      background-color: #eeeded;
                  }
              }
      
              
          }
         
      </style>
      
      
      
      
      qyloxe 1 Reply Last reply Reply Quote 0
      • qyloxe
        qyloxe @fakedrpanda last edited by

        @fakedrpanda If you want to use data from vuex in more advanced form, ie searching, querying, updating then i STRONGLY suggest to use this:

        https://vuex-orm.org/

        With this lib you can build models, those models could consume nested data and normalize them, you have excellent query capabilities and many more. In the context of q-table, you can use those queried data as computed property and this will maintains both reactivity and filtering. Meaning changes to data done via models will reflect to your data views (q-table etc.).

        F 1 Reply Last reply Reply Quote 1
        • A
          ArkIv last edited by

          https://vuejs.org/v2/api/#vm-set

          1 Reply Last reply Reply Quote 0
          • F
            fakedrpanda @qyloxe last edited by

            @qyloxe Thanks! Ima give it a try.
            And look what I found https://www.youtube.com/watch?v=_zKi8qrlgXc 😃

            qyloxe 1 Reply Last reply Reply Quote 0
            • qyloxe
              qyloxe @fakedrpanda last edited by

              @fakedrpanda yep, definitely worth watching his materials. Good catch!

              1 Reply Last reply Reply Quote 0
              • First post
                Last post