Super-Vuex 狀態管理最佳實踐

沈贇傑發表於2018-06-08
Vue

Vuex作為vue中核心的狀態管理元件，時常遇到編寫繁瑣的問題。是否我們可以通過一套方案就可以達到只定義資料結構而不需要寫無數的mutation getter 以及action。

所以，原則上我們是讓vuex變的更加輕量和簡單。

Super-Vuex

Super-Vuex 能夠幫你完成這些工作。我們先來看下簡單的寫法，是否能夠滿足你日常開發的需要。

資料：

// namespace: user
const store = {
  name: 'evio',
  age: 18,
  contact: {
    email: 'xxx@qq.com',
    tel: 13000000000,
    students: [
      { name: 'aaa', age: 20 }
    ]
  }
};
複製程式碼

呼叫：

this.$store.user.commit('age', 30);
this.$store.user.commit('contact.email', 'aaa@qq.com');
this.$store.user.commit('contact.tel', 13800000000);
this.$store.user.push('contact.students', { name: 'bbb', age: 21 }, { name: 'ccc', age: 22 });
this.$store.user.unshift('contact.students', { name: 'ddd', age: 23 });
this.$store.user.splice('contact.students', 1, 2);
複製程式碼

如果按照我們的設計，整個Vuex將變成一個資料物件，我們可以通過一些方法直接操作它。讓它的開發變的簡便，同時，能夠節省很多程式碼，使整個專案體積變小。

Super-Vuex 已幫你完成這些工作。當然，我們也需要自定義某些方法，這些都是支援的。

文件地址

簡單演示

建立ChildVuex例項，儲存user資料

// ./store/user.js
import { ChildVuex } from "super-vuex";

// 'user'為名稱空間
const child = new ChildVuex('user');
export default child;

child.value = {
  name: 'evio',
  age: 18,
  students: [
    {
      name: 'yixianle',
      age: 10
    }
  ],
  load: {
    allow: true,
    total: 100
  }
};
複製程式碼

可以建立多個，這裡再建立一個ChildVuex例項，儲存sub資料

// ./store/sub.js
import { ChildVuex } from "super-vuex";

// 'sub'為名稱空間
const sub = new ChildVuex('sub');
export default sub;

sub.value = {
  name: 'evio',
  subs: [1,2,3,4],
  isVip: false,
};
複製程式碼

建立一個SuperVuex例項

// store.js
import { SuperVuex } from 'super-vuex';

// 兩個vuex外掛，vuexPromise和vuejsStorage
import vuexPromise from 'vuex-promise';
import vuejsStorage from 'vuejs-storage';

import UserStore from './store/user';
import Subs from './store/sub'

const Main = new SuperVuex();
Main.setModule(UserStore);
// 可以set多個module
Main.setModule(Subs);
// 在SuperVuex中使用外掛
Main.setPlugin(vuexPromise, vuejsStorage);

export default Main.init();
複製程式碼

在VUE中如何使用

<template>
  ...
</template>

<script>
  import store from './store';
  export default {
    store: store,
    name: "index",
    methods: {
      changeName() {
        this.$store.user.commit('name', 'someone');
      },
      changeAllow() {
        this.$store.user.commit('load.allow', false);
      },
      pushStudent() {
        this.$store.user.push('students', {
          name: 'huaping',
          age: 300
        });
      },
      pushSubs() {
        this.$store.sub.push('subs', 10);
      },
      unshiftStudent() {
        this.$store.user.unshift('students', {
          name: 'huaping1',
          age: 302
        });
      },
      deleteStudent() {
        this.$store.user.splice('students', 0, 1);
      },
      gets() {
        this.$store.user.dispatch('load.data');
      }
    }
  }
</script>
複製程式碼

最後

某些簡單的東西往往更能提高我們的開發效率，經過我在公司的實踐，比如複雜的一些後臺系統，super-vuex就非常合適。歡迎issues和pr。

相關文章