Source: https://tanstack.com/store/latest/docs/framework/vue/quick-start

TanStack

Store v0v0

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Vue

Version

Latest

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Installation
  
  core

• Quick Start
  
  core

• Quick Start
  
  vue

API Reference

• JavaScript Reference
  
  core

• Classes / Store
  
  core

• Classes / Derived
  
  core

• Classes / Effect
  
  core

• Interfaces / StoreOptions
  
  core

• Interfaces / DerivedOptions
  
  core

• Vue Reference
  
  vue

• Functions / useStore
  
  vue

• Functions / shallow
  
  vue

Examples

• Simple
  
  vue

Framework

Vue

Version

Latest

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Installation
  
  core

• Quick Start
  
  core

• Quick Start
  
  vue

API Reference

• JavaScript Reference
  
  core

• Classes / Store
  
  core

• Classes / Derived
  
  core

• Classes / Effect
  
  core

• Interfaces / StoreOptions
  
  core

• Interfaces / DerivedOptions
  
  core

• Vue Reference
  
  vue

• Functions / useStore
  
  vue

• Functions / shallow
  
  vue

Examples

• Simple
  
  vue

Quick Start

Copy Markdown

The basic vue app example to get started with the TanStack vue-store.

App.vue

html

<script setup>
import Increment from './Increment.vue';
import Display from './Display.vue';
</script>

<template>
  <h1>How many of your friends like cats or dogs?</h1>
  <p>Press one of the buttons to add a counter of how many of your friends like cats or dogs</p>
  <Increment animal="dogs" />
  <Display animal="dogs" />
  <Increment animal="cats" />
  <Display animal="cats" />
</template>


<script setup>
import Increment from './Increment.vue';
import Display from './Display.vue';
</script>

<template>
  <h1>How many of your friends like cats or dogs?</h1>
  <p>Press one of the buttons to add a counter of how many of your friends like cats or dogs</p>
  <Increment animal="dogs" />
  <Display animal="dogs" />
  <Increment animal="cats" />
  <Display animal="cats" />
</template>

store.js

js

import { Store } from '@tanstack/vue-store';

// You can instantiate the store outside of Vue components too!
export const store = new Store({
  dogs: 0,
  cats: 0,
});

export function updateState(animal) {
  store.setState((state) => {
    return {
      ...state,
      [animal]: state[animal] + 1,
    };
  });
}


import { Store } from '@tanstack/vue-store';

// You can instantiate the store outside of Vue components too!
export const store = new Store({
  dogs: 0,
  cats: 0,
});

export function updateState(animal) {
  store.setState((state) => {
    return {
      ...state,
      [animal]: state[animal] + 1,
    };
  });
}

Display.vue

html

<script setup>
import { useStore } from '@tanstack/vue-store';
import { store } from './store';

const props = defineProps({ animal: String });
const count = useStore(store, (state) => state[props.animal]);
</script>

<!-- This will only re-render when `state[props.animal]` changes. If an unrelated store property changes, it won't re-render -->
<template>
  <div>{{ animal }}: {{ count }}</div>
</template>


<script setup>
import { useStore } from '@tanstack/vue-store';
import { store } from './store';

const props = defineProps({ animal: String });
const count = useStore(store, (state) => state[props.animal]);
</script>

<!-- This will only re-render when `state[props.animal]` changes. If an unrelated store property changes, it won't re-render -->
<template>
  <div>{{ animal }}: {{ count }}</div>
</template>

Increment.vue

html

<script setup>
import { store, updateState } from './store';

const props = defineProps({ animal: String });
</script>

<template>
  <button @click="updateState(animal)">My Friend Likes {{ animal }}</button>
</template>


<script setup>
import { store, updateState } from './store';

const props = defineProps({ animal: String });
</script>

<template>
  <button @click="updateState(animal)">My Friend Likes {{ animal }}</button>
</template>

Edit on GitHub

Quick Start

JavaScript Reference

Partners Become a Partner