Should Vuex store keep only the code of state structure and how to modify that state (mutations, actions), or also the actual state initialization and values?

I started wondering about it, when my state initialization code bee more plex, because I don't see any natural place in Vuex architecture to put this code into.

Let's say I have such a store:

export default {
  state: {
    list: []
  },

  mutations: {
    addItem(state, { item }) {
      state.list.push(item);
    }
  }
}

If the list starts empty, it's enough. But what if I have default values for the list and also want to store the list in LocalStorage, so that I can preserve it's value between page loads.

const STORAGE_LIST_KEY = 'list';

const LIST_DEFAULT = [
  {
    id: 1,
    name: 'item 1'
  },
  {
    id: 33,
    name: 'item 33'
  }
];

function initializeList() {
  let savedList = localStorage.getItem(STORAGE_LIST_KEY);
  return savedList ? savedList : LIST_DEFAULT;
];

Is there some natural place in the Vuex store architecture, where I should put initializeList() function? (e.g. In a Vue ponent I would put initializeList() into methods part of the ponent) Or maybe the store is just about the structure and the initialization code belongs to the Vue ponents?

Should Vuex store keep only the code of state structure and how to modify that state (mutations, actions), or also the actual state initialization and values?

I started wondering about it, when my state initialization code bee more plex, because I don't see any natural place in Vuex architecture to put this code into.

Let's say I have such a store:

export default {
  state: {
    list: []
  },

  mutations: {
    addItem(state, { item }) {
      state.list.push(item);
    }
  }
}

If the list starts empty, it's enough. But what if I have default values for the list and also want to store the list in LocalStorage, so that I can preserve it's value between page loads.

const STORAGE_LIST_KEY = 'list';

const LIST_DEFAULT = [
  {
    id: 1,
    name: 'item 1'
  },
  {
    id: 33,
    name: 'item 33'
  }
];

function initializeList() {
  let savedList = localStorage.getItem(STORAGE_LIST_KEY);
  return savedList ? savedList : LIST_DEFAULT;
];

Is there some natural place in the Vuex store architecture, where I should put initializeList() function? (e.g. In a Vue ponent I would put initializeList() into methods part of the ponent) Or maybe the store is just about the structure and the initialization code belongs to the Vue ponents?

• javascript
• vue.js
• vuex

Share Improve this question Follow edited Jan 12, 2019 at 14:53 Cœur 38.8k2525 gold badges206206 silver badges279279 bronze badges asked Jun 22, 2018 at 10:06 Robert KusznierRobert Kusznier 6,95199 gold badges5555 silver badges7373 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Your initialization state will be some sort of mutation or action depending upon the needs of async and side effects. This actions should be fired only once during initialization.

This mutation/action will then be triggered from root instance or sufficiently higher level ponent. You can also split the initialization of entire application state into smaller mutations or actions.

The advantage of this approach is you can split your Vuex store and dynamically load Vuex module (lazy loading).

In your case, since you wish to inflate/deflate state from local storage (which is a side effect), it makes sense to make an action.