vuex_in_react_typescript_store_with_actions_getters.ts

1import React from 'react';
2import { createStore, useStore } from 'vuex-in-react';
3
4// 1. Define your state type
5type State = {
6  count: number;
7};
8
9// 2. Create the store
10const store = createStore<State>({
11  state: {
12    count: 0
13  },
14  actions: {
15    increment(state) {
16      state.count++;
17    },
18    decrement(state) {
19      state.count--;
20    }
21  },
22  getters: {
23    double(state) {
24      return state.count * 2;
25    }
26  }
27});
28
29// 3. Use the store in a React component
30export const Counter: React.FC = () => {
31  const state = useStore(store);
32
33  return (
34    <div>
35      <p>Count: {state.count}</p>
36      <p>Double: {store.getters.double}</p>
37      <button onClick={() => store.actions.increment()}>+</button>
38      <button onClick={() => store.actions.decrement()}>-</button>
39    </div>
40  );
41};
42
43export default Counter;