Skip to content

Commit 1c21837

Browse files
committed
docs: add introduction "getting started" guide
1 parent c3c3553 commit 1c21837

File tree

1 file changed

+86
-0
lines changed

1 file changed

+86
-0
lines changed

docs/introduction/getting-started.md

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
id: getting-started
3+
title: Getting Started with Vue Redux
4+
hide_title: true
5+
sidebar_label: Getting Started
6+
description: "Introduction > Getting Started: First steps with Vue Redux"
7+
---
8+
9+
# Getting Started with Vue Redux
10+
11+
[Vue Redux](https://github.com/reduxjs/vue-redux) is the official [Vue](https://vuejs.org/) UI bindings layer for [Redux](https://redux.js.org/). It lets your Vue components read data from a Redux store, and dispatch actions to the store to update state.
12+
13+
## Installation
14+
15+
Vue Redux requires **Vue 3 or later**, in order to make use of the Vue Composition API.
16+
17+
### Installing with `npm` or `yarn`
18+
19+
To use Vue Redux with your Vue app, install it as a dependency:
20+
21+
```bash
22+
# If you use npm:
23+
npm install @reduxjs/vue-redux
24+
25+
# Or if you use Yarn:
26+
yarn add @reduxjs/vue-redux
27+
```
28+
29+
You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app.
30+
31+
Vue-Redux is written in TypeScript, so all types are automatically included.
32+
33+
## API Overview
34+
35+
### `provideStoreToApp`
36+
37+
Vue Redux includes a `provideStoreToApp` function, which makes the Redux store available to the rest of your app:
38+
39+
```typescript
40+
import { createApp } from 'vue'
41+
import { provideStoreToApp } from '@reduxjs/vue-redux'
42+
import { store } from './store'
43+
44+
import App from './App.vue'
45+
46+
const app = createApp(App)
47+
provideStoreToApp(app, { store })
48+
app.mount('#app')
49+
```
50+
51+
### Compositions
52+
53+
Vue Redux provides a pair of custom Vue compositions that allow your Vue components to interact with the Redux store.
54+
55+
`useSelector` reads a value from the store state and subscribes to updates, while `useDispatch` returns the store's `dispatch` method to let you dispatch actions.
56+
57+
```vue
58+
<script setup lang="ts">
59+
import { useSelector, useDispatch } from '@reduxjs/vue-redux'
60+
import { decrement, increment } from './store/counter-slice'
61+
import { RootState } from './store'
62+
63+
const count = useSelector((state: RootState) => state.counter.value)
64+
const dispatch = useDispatch()
65+
</script>
66+
67+
<template>
68+
<div>
69+
<div>
70+
<button aria-label="Increment value" @click="dispatch(increment())">
71+
Increment
72+
</button>
73+
<span>{{ count }}</span>
74+
<button aria-label="Decrement value" @click="dispatch(decrement())">
75+
Decrement
76+
</button>
77+
</div>
78+
</div>
79+
</template>
80+
```
81+
82+
## Help and Discussion
83+
84+
The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!
85+
86+
You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.

0 commit comments

Comments
 (0)