Vue

你可以在 Vue 里使用 rematch，就像在 Vue 上使用 Redux 和 vuejs-redux. 在 Vue 中使用 rematch，与在React中使用 connect 高阶组件不同，我们创造了一个容器组件，用来负责连接子组件。

看下面的例子：

CounterContainer.vue

<template>
  <Provider
    :store="store" 
    :mapDispatch="mapDispatch" 
    :mapState="mapState">
    <template slot-scope="{ count, increment }">
      <Counter :count="count" :increment="increment"/>
    </template>
  </Provider>
</template>
​
<script>
  import Provider from 'vuejs-redux';
  import { init } from '@rematch/core';
  import Counter from './Counter.vue';
​
  // Every provider components need the store. To connect the components to the same instance of
  // the store, it's recommended to export the instance of the store in another file and import it
  // in the container components.
  const store = init();
​
  // It's recommended to declare mapState and mapDispatch outside the component (as pure function)
  // for easier tests.
  const mapState = state => ({
    count: state.count,
  });
​
  const mapDispatch = dispatch => ({
    increment: () => dispatch.count.increment(),
  })
​
  export default {
    data: () => ({
      store // make it accessible in the template
    }),
​
    methods: {
      mapDispatch,
      mapState
    }
  }
</script>

Counter.vue

<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <button @click="increment" />
  </div>
</template>

<script>
export default {
  props: ['count', 'increment']
};
</script>