Vue 不使用Vuex的状况下进行状态管理

时间 2019-12-05

标签 vue 不使 vuex 状况进行状态管理繁體版

原文原文链接

在封装本身的Vue ui库的时候，每每要封装一些比较复杂的组件，好比说table，form之类。这些组件因为功能繁杂，还涉及到子组件嵌套及通讯，若是没有一套状态管理方案的话很容易致使代码难以阅读、难以维护、难以修改等问题，但引入vuex的话又过于沉重。鉴于业内已经有element-ui这样比较成熟的案例，咱们能够看看element-ui是怎么在没有vuex的状况下进行状态管理的。vue

Element-ui主要以两种形式进行状态管理：provider和自定义store。provider比较简单，父组件将数据装入providder，子组件用inject进行接收。这种方法优势是拿来即用，十分简单。缺点是子组件没法修改数据。全部局限性仍是比较大的。vuex

第二种方法是封装自定义store。咱们参考element-ui中table组件，element-ui首先定义了一个table-store.js文件，存放store：typescript

const TableStore = function(table, initialState = {}) {
  if (!table) {
    throw new Error('Table is required.');
  }
  this.table = table;

  this.states = {
    ...
  }

TableStore.prototype.mutations = {
    ...
}

TableStore.prototype.actions = {
    ...
}

除了没有actions之外其余基本和vuex差很少。element-ui

element-ui写tableStore用的是es5语法，这里用一个异步设置msg字段的typescript案例来进行讲解：app

export class TestStore {

  public states: IState = {
    msg: ''
  };

  public commit(action: string, ...args: any[]) {
    const mutations = this.mutations as any;
    if (mutations[action]) {
      mutations[action].apply(this, [this.states].concat(args));
    } else {
      throw new Error(`Action not found: ${action}`);
    }
  }

  public mutations = {
    setMsg(states: IState, msg: any) {
      states.msg = msg;
    }
  };
}

interface IState {
  msg: string
}

使用的时候先在父组件上挂载store并传递给子组件：异步

<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld :store="store" />
        '
        <p>
            {{store.states.msg}}
        </p>
    </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import HelloWorld from '@/components/HelloWorld.vue';
  import { TestStore } from '@/utils/testStore';

  @Component({
    components: {
      HelloWorld,
    }
  })
  export default class Home extends Vue {
    store: TestStore = new TestStore();
  }
</script>

而后子组件用props接受store，并提交setMsg操做：ide

<template>

</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';

  @Component({
  })
  export default class HelloWorld extends Vue {
    @Prop() private store!: any;

    public created() {
      setTimeout(() => {
        this.store.commit('setMsg', 'changed');
      }, 1000);
    }
  }
</script>

而后Home组件template中的msg就会在相应的时间更新。这样咱们就实现了不依赖vuex进行状态管理。ui