Vue

Install
npm install overmind overmind-vue
There are three approaches to connecting Overmind to Vue.
Hooks (experimental)
overmind/index.js
index.js
components/SomeComponent.vue
overmind/index.js
​
import { createHooks } from 'overmind-vue/vu3'
​
export const config = {
  state: {
    foo: 'bar'
  },
  actions: {
    onClick() {}
  }
}
​
export const hooks = createHooks()
index.js
import { createApp } from 'vue'
import { createOvermind } from 'overmind'
import { withOvermind } from 'overmind-vue/vu3'
import { config } from './overmind'
import App from './App.vue'
​
const overmind = createOvermind(config)
​
createApp(withOvermind(overmind, App)).mount('#app')
​
...
components/SomeComponent.vue
<template>
  <div @click="actions.onClick">
    {{ state.foo }}
  </div>
</template>
<script>
  import { hooks } from '../overmind'
  
  export default {
    setup() {
      const state = hooks.state()
      const actions = hooks.actions()
      
      return { state, actions }
    }
  }
</script>
The hooks also allows you to point to specific namespaces:
components/SomeComponent.vue
components/SomeComponent.vue
<template>
  <div @click="actions.onClick">
    {{ state.foo }}
  </div>
</template>
<script>
  import { hooks } from '../overmind'
  
  export default {
    setup() {
      const state = hooks.state(state => state.admin)
      const actions = hooks.actions(actions => actions.admin)
      
      return { state, actions }
    }
  }
</script>
You also have effects and reaction available on your hooks:
components/SomeComponent.vue
components/SomeComponent.vue
  <div @click="actions.onClick">
    {{ state.foo }}
  </div>
</template>
<script>
  import { hooks } from '../overmind'
  
  export default {
    setup() {
      const effects = hooks.effects()
      const reaction = hooks.reaction()
      
      return { state, actions }
    }
  }
</script>
If you prefer using JSX, that is also possible:
components/SomeComponent.vue
components/SomeComponent.vue
<script>
  import { hooks } from '../overmind'
  
  export default {
    setup() {
      const state = hooks.state()
      const actions = hooks.actions()
      
      return () => (
        <div onClick={actions.onClick}>{state.value.foo}</div>
      )
    }
  }
</script>
Plugin
Vue has a plugin system that allows us to expose Overmind to all components. This allows minimum configuration and you just use state etc. from any component.
overmind/index.js
index.js
components/SomeComponent.vue
overmind/index.js
export const overmind = {
  state: {
    foo: 'bar'
  },
  actions: {
    onClick() {}
  }
}
index.js
import Vue from 'vue/dist/vue'
import { createOvermind } from 'overmind'
import { createPlugin } from 'overmind-vue'
import { config } from './overmind'
​
const overmind = createOvermind(config)
const OvermindPlugin = createPlugin(overmind)
​
Vue.use(OvermindPlugin)
​
...
components/SomeComponent.vue
<template>
  <div @click="actions.onClick">
    {{ state.foo }}
  </div>
</template>
If you rather want to expose state, actions and effects differently you can configure that.
index.js
components/SomeComponent.vue
index.js
import Vue from 'vue/dist/vue'
import { createOvermind } from 'overmind'
import { createPlugin } from 'overmind-vue'
import { config } from './overmind'
​
const overmind = createOvermind(config)
const OvermindPlugin = createPlugin(overmind)
​
Vue.use(OvermindPlugin, ({ state, actions, effects }) => ({
  admin: state.admin,
  posts: state.posts,
  actions,
  effects
}))
​
...
components/SomeComponent.vue
<template>
  <div @click="actions.onClick">
    {{ admin.foo }} {{ posts.foo }}
  </div>
</template>
Rendering
Any state accessed in the component will cause the component to render when a mutation occurs on that state. Overmind actually uses the same approach to change detection as Vue itself. When using the plugin any component can access any state, though the only overhead that is added to the application is an instance of a “tracking tree” per component. This might sound scary, but it is a tiny little object that adds a callback function to Overmind as long as the component lives. These tracking trees are even reused as components unmount.
Pass state as props
If you pass anything from the state to a child component it will just work out of the box. The child component will “rescope” the property to its own tracking tree. This ensures that the property you passed is tracked within that component.
components/Todo.vue
components/Todos.vue
components/Todo.vue
<template>
  <li>{{ todo.title }}</li>
</template>
<script>
export default {
  name: 'Todo',
  props: ["todo"]
}
</script>
components/Todos.vue
<template>
  <ul>
    <todo-component
      v-for="post in state.postsList"
      :todo="todo"
      :key="todo.id"
    ></todo-component>
  </ul>
</template>
<script>
import TodoComponent from './Todo'
​
export default {
  name: 'Todo',
  components: {
    TodoComponent
  }
}
</script>
Reactions
To run effects in components based on changes to state you use the reaction function in the lifecycle hooks of Vue.
components/SomeComponent.vue
components/SomeComponent.vue
<template>
  <div @click="overmind.actions.onClick">
    {{ overmind.state.foo }}
  </div>
</template>
<script>
import { connect } from '../overmind'
​
export default connect({
  mounted() {
    this.disposeReaction = this.overmind.reaction(
      ({ currentPage }) => currentPage,
      () => document.querySelector('#app').scrollTop = 0
    )
  },
  destroyed() {
    this.disposeReaction()
  }
})
</script>
Connect
If you want more manual control of what components connect to Overmind you can use the connector.
overmind/index.js
components/SomeComponent.vue
overmind/index.js
import { createOvermind } from 'overmind'
import { createConnect } from 'overmind-vue'
​
const overmind = createOvermind({
  state: {},
  actions: {}
})
​
export const connect = createConnect(overmind)
components/SomeComponent.vue
<template>
  <div @click="overmind.actions.onClick">
    {{ overmind.state.foo }}
  </div>
</template>
<script>
import { connect } from '../overmind'
​
const Component = {}
​
export default connect(Component)
</script>
You can also expose parts of the configuration on custom properties of the component:
components/SomeComponent.vue
components/SomeComponent.vue
<template>
  <div @click="actions.someAdminAction">
    {{ state.someAdminState }}
  </div>
</template>
<script>
import { connect } from '../overmind'
​
const Component = {}
​
export default connect(({ state, actions, effects }) => ({
  state: state.admin,
  actions: actions.admin
}), Component)
</script>
You can now access the admin state and actions directly with state and actions.
Computed
Vue has its own observable concept that differs from Overmind. That means you can not use Overmind state inside a computed and expect the computed cache to be busted when the Overmind state changes. But computeds are really for caching expensive computation, which you will rather do inside Overmind using derived anyways.
Using props
You can combine Overmind state with props to dynamically extract state.
components/SomeComponent.vue
components/SomeComponent.vue
<template>
  <div>
    {{ title }}
  </div>
</template>
<script>
export default {
  name: 'SomeComponent',
  props: ["id"],
  data: (self) => ({
    get title() {
      return self.state.titles[self.id]
    }
  })
}
</script>
views - Previous
Angular
Next - views
Svelte
Last updated 3 months ago