[V6] F7 Store - Modules

Questions
1

Is there any implementation to modularize the FWK7-Core Store in multiple files?

I have not found anything about it in the documentation and here.

Thanks!

1 Like
2 
// account-store.js
export const accountStore = {
  state: {
    ...
  },
  actions: {
    ...
  },
  getters: {
    ...
  }
}


// news-store.js
export const newsStore = {
  state: {
    ...
  },
  actions: {
    ...
  },
  getters: {
    ...
  }
}

// main store.js
import { createStore } from 'framework7'
import { accountStore } from './account-store.js'
import { newsStore } from './news-store.js'

const store = createStore({
  state: {
    ...accountStore.state,
    ...newsStore.state,
  },
  actions: {
    ...accountStore.actions,
    ...newsStore.actions,
  },
  ...
})

export default store
1 Like
3

Fantastic! Thank you very much @nolimits4web

4

Hi! Regarding store, how do I access the actions or getters of a particular store?
That is, if I have multiple stores (imported to a main one as you solved Fabricio)

Ex:

// main store.js
import {createStore} from ‘framework7’
import {accountStore} from ‘./account-store.js’
import {newsStore} from ‘./news-store.js’

const store = createStore ({
state: {
… accountStore.state,
… newsStore.state,
},
actions: {
… accountStore.actions,
… newsStore.actions,
},
…
})

export default store

// html

export default function (props, {$ f7, $ store, $ on, $ onBeforeMount, $ onMounted, $ onBeforeUnmount, $ onUnmounted}) {

 const users = $ store.newsStore.getters.user; // ????

 // Page Events
 $ on ('pageMounted', (e, page) => {
   console.log ('pageMounted', page);
   $ state.newsStore.dispatch ('action'); // ????
 });

I don’t know if I explain myself
Thanks!

5

Access them as usual, just as if the store is just one.

const user = $store.getters.user.value;

$store.dispatch('actionName');
6

Perfect! Thank you so much @bryceandy

7

When I do it this way, I’m loosing the reactive behavior. The onUpdate callback seems to get lost and works only for stuff defined in the main file.

8

… oh - it’s not an issue of an external imported file but with the structure of the state properties. If your state includes only first level variables like:

const store = createStore({
  state: {
    userFirstName : "Max",
    userLastName : "Headroom",
    ...
  },...

everything works fine - the template is refreshing as soon as the values change. But if you do it like:

const store = createStore({
  state: {
    user {
        firstName : "Max",
        lastName : "Headroom",
   },
    ...
  },...

the reactive behavior is broken. It seems that only first-level variable trigger the event. If deeper structures get changed, there is no refresh. Btw… is there a way to hook to the onUpdate event directly? I’m working with virtualLists and I need to update the content with replaceAllItems() instead… this doesn’t work by refreshing just the template, no?

9 
import { createStore, utils } from 'framework7';

const store = createStore({
  state: {
    user: {
      firstname: 'Max',
      lastname: 'Headroom'
    }
  },
  getters: {
    user: ({ state }) => state.user
  },
  actions: {
    setUser({ state },obj) { 
      state.user = utils.extend(state.user,obj);
    }
  }
});

<template>
  <div class="page">
    <div class="page-content">
      <div class="block">
        <a class="button" @click=${setUser}>set User</a>
      </div>
      <div class="block">
        <p>firstname: ${user.value.firstname}</p>
        <p>lastname: ${user.value.lastname}</p>
        <p>age: ${user.value.age || 'TBD'}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default (props,{ $store }) => {
  let user = $store.getters.user;
  user.onUpdated((val) => {
    console.log('new value => ',val); 
    // => {firstname: "Min", lastname: "Headroom", age: "18"}
  });
  function setUser() {
    $store.dispatch('setUser',{ firstname: 'Min', age: '18' });
  }
  return $render;
}
</script>
4 Likes
10

@f16 this work for single store only. For multiple store, the reactivity still not working.

let users = $store.getters.users;

It should return [] as its default value, but it keeps return undefined even though the state has been updated.

to make it work I have to access the state directly let users = $store.state.users;