VUEDEUX PLUGIN

In this section we will be breaking down how to get started with the Vuedeux Plugin Creator.

The Vuedeux plugin initiates a Vuex module and maps all actions between the newly created Vuex module and Redux. It also keeps our Redux store and our Vuex 'Redux' module in sync.

GETTING STARTED WITH NPM

npm install vuedeux

Importing the dependencies

import vdxPluginCreator from 'vuedeux';
import reduxStore from './reduxstore';
import * as reduxActionTypes from './actions/reduxactiontypes';

The dependencies for the Vuedeux plugin are:

• Vuedeux package
• Your Redux store
• Your Action Type CONSTANTS

It is common convention in Flux and Redux to identify your Action Types using Constants and group them together in their own file (as seen below) . Vuedeux relies on this convention in order to accurately map your Redux Action types to Vuex actions and mutations.

The PluginCreators expects your Action Type Constants in an object.

import * as reduxActionTypes from './actions/reduxactiontypes';

The following Node import statement is an easy way for you to create an action type object from your action types.

// ReduxActionTypes.js

export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO'
export const EDIT_TODO = 'EDIT_TODO'
export const COMPLETE_TODO = 'COMPLETE_TODO'
export const COMPLETE_ALL = 'COMPLETE_ALL'
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'

Generating the plugin

const vdx = vdxPluginCreator(reduxStore, reduxActionTypes);

Again, you may call the plugin anything you wish. Above we are calling our plugin 'vdx' for simplicty.

Inserting the plugin into a Vuex Store

const store = new Vuex.Store({
  state,
  mutations,
  plugins: [vdx],
});

To add the plugin simply place the plugin into the plugin option of your Vuex store.

All the existing mutations, actions , getters, even existing plugin you utilize in an existing Vuex state will be unaffected.

Putting it all together

//vuex.js 

import Vue from 'vue';
import Vuex from 'vuex';
import { state, mutations } from './mutations';

import vdxPluginCreator from 'vuedeux';
import reduxStore from './reduxstore';
import * as reduxActionTypes from './actions/reduxactiontypes';


// Make sure to call Vue.use(Vuex) first if you're using a Vue module build system
Vue.use(Vuex);

const vdx = vdxPluginCreator(reduxStore, reduxActionTypes);

const store = new Vuex.Store({
  state,
  mutations,
  plugins: [vdx, localStoragePlugin],
});

export default store;

Your new Vuex Structure

|-- VUEX STORE ($store in child components)

|-- STATE ($store.state)

|-- REDUX --- ($store.state.redux)

(Your existing Redux Store)