Лучшие практики управления состоянием Super-Vuex

Vue.js Vuex

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 для хранения пользовательских данных.

// ./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 для хранения дополнительных данных.

// ./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();

Как использовать во Вью

<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очень подходит. Вопросы и PRS приветствуются.

Категории