Persisting store state in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vuex plugin for persisting state.

Vue

import createPersistedState from '[1]';

Drag options to blanks, or click blank then click option'

Avuex-storage

Bvuex-persist

Cvue-persistedstate

Dvuex-persistedstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'vuex-persist' instead of 'vuex-persistedstate'.

Misspelling the package name.

The correct package to import for persisting Vuex store state is vuex-persistedstate.

2fill in blank

medium

Complete the code to add the persisted state plugin to the Vuex store.

Vue

const store = createStore({
  plugins: [[1]()],
  state() {
    return { count: 0 };
  }
});

Drag options to blanks, or click blank then click option'

AcreatePersistedState

BpersistState

CpersistedState

Dpersist

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong plugin name or forgetting to call it as a function.

Passing the plugin without parentheses.

The plugin function imported is called createPersistedState, which needs to be called to create the plugin instance.

3fill in blank

hard

Fix the error in the code to correctly persist only the 'user' module state.

Vue

const store = createStore({
  modules: {
    user: userModule
  },
  plugins: [createPersistedState({
    paths: [[1]]
  })]
});

Drag options to blanks, or click blank then click option'

AuserModule

Buser

C'user'

D'userModule'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the module variable instead of its name as a string.

Using the module object instead of the string key.

The paths option expects an array of strings representing module names. So the module name 'user' must be a string.

4fill in blank

hard

Fill both blanks to configure the persisted state to use sessionStorage and only save 'settings' module.

Vue

const store = createStore({
  modules: {
    settings: settingsModule
  },
  plugins: [createPersistedState({
    storage: window.[1],
    paths: [[2]]
  })]
});

Drag options to blanks, or click blank then click option'

AsessionStorage

BlocalStorage

C'settings'

D'user'

Attempts:

3 left

💡 Hint

Common Mistakes

Using localStorage instead of sessionStorage.

Passing module variables instead of strings in paths.

To use session storage, set storage to window.sessionStorage. To persist only the 'settings' module, include its name as a string in paths.

5fill in blank

hard

Fill all three blanks to create a persisted state plugin that uses localStorage, saves 'cart' and 'user' modules, and sets a custom key 'myAppStore'.

Vue

const store = createStore({
  modules: {
    cart: cartModule,
    user: userModule
  },
  plugins: [createPersistedState({
    storage: window.[1],
    paths: [[2], [3]],
    key: 'myAppStore'
  })]
});

Drag options to blanks, or click blank then click option'

AlocalStorage

B'cart'

C'user'

D'myAppStore'

Attempts:

3 left

💡 Hint

Common Mistakes

Using sessionStorage instead of localStorage.

Not quoting module names in paths.

Forgetting to set the key or using a wrong key.

Use window.localStorage for storage. The paths array should include the module names as strings: 'cart' and 'user'. The key option sets the storage key, here 'myAppStore'.