Official Vue bindings for Redux. Performant and flexible.
Warning
This package is in alpha and is rapidly developing.
Vue Redux requires Vue 3 or later.
To use React Redux with your Vue app, install it as a dependency:
# If you use npm:
npm install @reduxjs/vue-redux
# Or if you use Yarn:
yarn add @reduxjs/vue-redux
You'll also need to install Redux and set up a Redux store in your app.
This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.
The following Vue component works as-expected:
<script setup lang="ts">
import { useSelector, useDispatch } from '@reduxjs/vue-redux'
import { decrement, increment } from './store/counter-slice'
import { RootState } from './store'
const count = useSelector((state: RootState) => state.counter.value)
const dispatch = useDispatch()
</script>
<template>
<div>
<div>
<button aria-label="Increment value" @click="dispatch(increment())">
Increment
</button>
<span>{{ count }}</span>
<button aria-label="Decrement value" @click="dispatch(decrement())">
Decrement
</button>
</div>
</div>
</template>