Redux, MobX, VueX, Pinia, Context, Hooks, UserData - sgml/signature GitHub Wiki

UserData Behavior

UserData predates all other offline data stores:

<!DOCTYPE html>
<html>
<head>
  <title>UserData Example</title>
  <script>
    function saveData() {
      var el = document.getElementById('dataElement');
      el.setAttribute('data', document.getElementById('input').value);
      el.save('myStore');
    }

    function loadData() {
      var el = document.getElementById('dataElement');
      el.load('myStore');
      document.getElementById('input').value = el.getAttribute('data');
    }
  </script>
</head>
<body onload="loadData()">
  <input type="text" id="input" />
  <button onclick="saveData()">Save</button>
  <span id="dataElement" style="behavior:url('#default#userData')"></span>
</body>
</html>

Mapping

Start with a Database Abstraction, such as PouchDB, then create a plugin for it. From there, use the Interceptor Pattern to migrate from one framework to another:

  1. AngularJS factory => VueX mutation
  2. AngularJS constant => VueX state
  3. AngularJS provider => VueX getter
  4. AngularJS controller => VueX actions

Adapter Pattern

import Vue from 'vue';
import Vuex from 'vuex';
import { createPinia, defineStore } from 'pinia';

export function createStore(version) {
    if (version === 'vue2') {
        Vue.use(Vuex);
        return new Vuex.Store({
            state: {},
            mutations: {},
            actions: {},
            getters: {}
        });
    } else if (version === 'vue3') {
        const pinia = createPinia();
        return defineStore('main', {
            state: () => ({}),
            actions: {},
            getters: {}
        })();
    } else {
        throw new Error('Invalid version specified. Use "vue2" or "vue3".');
    }
}

PouchDB

  1. https://pouchdb.com/external.html#framework_adapters
  2. https://github.com/ActiveEngagement/pinia-pouchdb-plugin/blob/master/README.md

Utility-First Libraries

  1. Tachyons
  2. shed.css
  3. Expressive CSS
  4. BassCSS
  5. Top Utility First CSS List

Persistence

Comparisons

Migration

MobX

Vuex to Pinia Migration

Redux

Hooks

VueX

Async

MapGetters

Style Guide

Watch

Subscribe

Multiple Stores

Internals (Proxy/Reflect)

Mocking

import Vue from 'vue';
import { mount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';

Vue.config.silent = true;
Vue.config.ignoredElements = ['nuxt-link'];

Vue.config.stubs['nuxt-link'] = {
  template: '',
};

Vue.config.stubs['no-ssr'] = {
  template: '',
};

test('renders hello world', () => {
  const wrapper = mount(HelloWorld);
  expect(wrapper.text()).toBe('Hello World');
});

Games

⚠️ **GitHub.com Fallback** ⚠️