Skip to content

reduxjs/vue-redux

Repository files navigation

Vue Redux

Official Vue bindings for Redux. Performant and flexible.

GitHub Workflow Status npm version npm downloads

Warning

This package is in alpha and is rapidly developing.

Installation

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.

Usage

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>