vuex-immutable-replace-state

Vuex replace state plugin to correctly handle state replacement when using immutables states

Problem

Any plugin that uses Store.replaceState like vuex-persistedstate or SSR like Nuxt are most of the time using JSON.stringify on the state. All immutable types support a toJSON method what will be called when the state is stringified. The problem is only when Store.replaceState you state will not have any immutable anymore, just object's, array's etc. what means that you can't call any immutable methods. This plugin tries to solve this problem.

Requirements

Vue.js (v2.0.0+)
Vuex (v2.0.0+)

Installation

# yarn
$ yarn add vuex-immutable-replace-state
# npm
$ npm install vuex-immutable-replace-state

Usage

options object

property	type	version	default	description
`deep`	boolean	`false`	^1.1.0	if set to `true` it will do a deep replace of immutables

By default it will only replace the first level of the state

//default
const state = {
    todo: new List()
}
//will only work with {deep: true}
const state = {
    today: {
        done: new List (),
        todo: new List ()
    }
}

Examples

import vuexImmutableReplaceState from "vuex-immutable-replace-state";
import createPersistedState from "vuex-persistedstate";

import { List } from 'immutable'

const store = new Vuex.Store({
    state: {
        todo: new List() //this is important
    },
    plugins: [
        vuexImmutableReplaceState(), //first 
        createPersistedState()
    ]
});

when working with modules {deep: true} is required

import vuexImmutableReplaceState from "vuex-immutable-replace-state";
import createPersistedState from "vuex-persistedstate";

import { List, Map } from 'immutable'

const store = new Vuex.Store({
    state: {
        todo: new List() //this is important
        module: {
            a: {
                state: new Map()
            }
        }
    },
    plugins: [
        vuexImmutableReplaceState({deep: true}), //deep true 
        createPersistedState()
    ]
});