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

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

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

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

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写tableStore用的是es5语法，这里用一个异步设置msg字段的typescript案例来进行讲解：

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>

<s cript 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();

  }

</s cript>

然后子组件用props接受store，并提交setMsg操作：

<template>

</template>

<s cript 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);

    }

  }

</s cript>

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