Vue store.state not changed

Questions
1

I changed the state value in action function, but it is reverted after returning the function.
These are the reproducible steps:

  1. I used all the latest version as of 2021-01-31.

  2. create a new directory then “framework7-cli create”

  3. select minimal vue options.

  4. Edit app.vue:

     onMounted(() => {
 f7ready(() => {

   console.log('1.Simple=', f7.store.state.products);
   f7.store.dispatch('Simple').then((ret) => {
     console.log('3.Simple=', ret, f7.store.state.products);
   });

   // Call F7 APIs here
 });

    });

  5. Edit store.vue

     actions: {
   Simple({ state }) {
     state.products = [{
       id: '99',
       title: 'XX',
       description: 'YY',
     }];
     console.log('2.Simple=', state.products);
     return '123';
   },
   addProduct({ state }, product) {

  6. This is the console output of mine:

    1.Simple= (3) [{…}, {…}, {…}]
2.Simple= [{…}]
3.Simple= 123 (3) [{…}, {…}, {…}]

That shows

  1. original state has 3 products,
  2. I set one product in action, and console.log shows products has one.
  3. after returning from action, in app.vue, state.products is not changed.

Am I using the API incorrectly?

Thanks,

2

Seems like a bug. Will be fixed in next update. For workaround, use your initial store instance instead of f7.store:

import store from 'path/to/store.js';

...

   console.log('1.Simple=', store.state.products);
   store.dispatch('Simple').then((ret) => {
     console.log('3.Simple=', ret, store.state.products);
   });