0
# Store Management
1

2
Core functionality for creating, configuring, and managing Vuex stores with state, mutations, actions, and getters.
3

4
## Capabilities
5

6
### Store Creation
7

8
Creates a new Vuex store instance with the provided configuration.
9

10
```typescript { .api }
11
/**
12
 * Create a new Vuex store instance
13
 * @param options - Store configuration options
14
 * @returns Store instance
15
 */
16
function createStore<S>(options: StoreOptions<S>): Store<S>;
17

18
interface StoreOptions<S> {
19
  /** Initial state object or function returning state */
20
  state?: S | (() => S);
21
  /** Computed getters for derived state */
22
  getters?: GetterTree<S, S>;
23
  /** Asynchronous action handlers */
24
  actions?: ActionTree<S, S>;
25
  /** Synchronous mutation handlers */
26
  mutations?: MutationTree<S>;
27
  /** Sub-modules for organizing large stores */
28
  modules?: ModuleTree<S>;
29
  /** Store plugins for extending functionality */
30
  plugins?: Plugin<S>[];
31
  /** Enable strict mode for development */
32
  strict?: boolean;
33
  /** Enable/disable DevTools integration */
34
  devtools?: boolean;
35
}
36
```
37

38
**Usage Examples:**
39

40
```typescript
41
import { createStore } from "vuex";
42

43
// Basic store
44
const store = createStore({
45
  state: {
46
    count: 0,
47
    user: null
48
  },
49
  mutations: {
50
    increment(state) {
51
      state.count++;
52
    },
53
    setUser(state, user) {
54
      state.user = user;
55
    }
56
  },
57
  actions: {
58
    async fetchUser({ commit }, userId) {
59
      const user = await api.getUser(userId);
60
      commit('setUser', user);
61
    }
62
  },
63
  getters: {
64
    isLoggedIn: state => state.user !== null,
65
    userDisplayName: state => state.user?.name || 'Guest'
66
  },
67
  strict: process.env.NODE_ENV !== 'production'
68
});
69

70
// Store with modules
71
const store = createStore({
72
  modules: {
73
    user: userModule,
74
    cart: cartModule
75
  },
76
  plugins: [persistedStatePlugin, loggerPlugin]
77
});
78
```
79

80
### State Access
81

82
Access the store's reactive state through the state property.
83

84
```typescript { .api }
85
/**
86
 * Read-only access to store state
87
 */
88
readonly state: S;
89
```
90

91
**Usage Examples:**
92

93
```typescript
94
// Access state directly
95
const currentCount = store.state.count;
96
const user = store.state.user;
97

98
// Access nested module state
99
const cartItems = store.state.cart.items;
100
const userProfile = store.state.user.profile;
101
```
102

103
### Getters Access
104

105
Access computed getters for derived state values.
106

107
```typescript { .api }
108
/**
109
 * Access to computed getters
110
 */
111
readonly getters: any;
112
```
113

114
**Usage Examples:**
115

116
```typescript
117
// Access getters
118
const isLoggedIn = store.getters.isLoggedIn;
119
const cartTotal = store.getters['cart/total'];
120

121
// Getters with parameters
122
const getTodoById = store.getters.getTodoById;
123
const todo = getTodoById(42);
124
```
125

126
### Mutation Committing
127

128
Synchronously commit mutations to modify state.
129

130
```typescript { .api }
131
/**
132
 * Commit a mutation to modify state synchronously
133
 * @param type - Mutation type string
134
 * @param payload - Optional payload data
135
 * @param options - Commit options
136
 */
137
commit(type: string, payload?: any, options?: CommitOptions): void;
138

139
/**
140
 * Commit a mutation with object-style payload
141
 * @param payloadWithType - Object containing type and payload
142
 * @param options - Commit options
143
 */
144
commit<P extends Payload>(payloadWithType: P, options?: CommitOptions): void;
145

146
interface CommitOptions {
147
  /** Disable DevTools notification (deprecated) */
148
  silent?: boolean;
149
  /** Commit mutation in root module when called from namespaced module */
150
  root?: boolean;
151
}
152
```
153

154
**Usage Examples:**
155

156
```typescript
157
// Basic mutation commit
158
store.commit('increment');
159
store.commit('setUser', { name: 'John', id: 1 });
160

161
// Object-style commit
162
store.commit({
163
  type: 'increment',
164
  amount: 10
165
});
166

167
// Namespaced mutation
168
store.commit('user/setProfile', profileData);
169

170
// Root commit from namespaced context
171
store.commit('globalReset', null, { root: true });
172
```
173

174
### Action Dispatching
175

176
Asynchronously dispatch actions that can contain async operations and commit mutations.
177

178
```typescript { .api }
179
/**
180
 * Dispatch an action asynchronously
181
 * @param type - Action type string
182
 * @param payload - Optional payload data
183
 * @returns Promise resolving to action result
184
 */
185
dispatch(type: string, payload?: any, options?: DispatchOptions): Promise<any>;
186

187
/**
188
 * Dispatch an action with object-style payload
189
 * @param payloadWithType - Object containing type and payload
190
 * @param options - Dispatch options
191
 * @returns Promise resolving to action result
192
 */
193
dispatch<P extends Payload>(payloadWithType: P, options?: DispatchOptions): Promise<any>;
194

195
interface DispatchOptions {
196
  /** Dispatch action in root module when called from namespaced module */
197
  root?: boolean;
198
}
199
```
200

201
**Usage Examples:**
202

203
```typescript
204
// Basic action dispatch
205
await store.dispatch('fetchUser', userId);
206
await store.dispatch('increment');
207

208
// Object-style dispatch
209
await store.dispatch({
210
  type: 'updateUser',
211
  user: userData
212
});
213

214
// Namespaced action
215
await store.dispatch('cart/addItem', item);
216

217
// Root dispatch from namespaced context
218
await store.dispatch('globalRefresh', null, { root: true });
219

220
// Handle action results
221
const result = await store.dispatch('validateForm', formData);
222
if (result.isValid) {
223
  // Handle success
224
}
225
```
226

227
### State Replacement
228

229
Replace the entire store state (useful for hydration).
230

231
```typescript { .api }
232
/**
233
 * Replace the entire store state
234
 * @param state - New state object
235
 */
236
replaceState(state: S): void;
237
```
238

239
**Usage Examples:**
240

241
```typescript
242
// Replace entire state (e.g., for SSR hydration)
243
store.replaceState(hydratedState);
244

245
// Reset to initial state
246
store.replaceState(initialState);
247
```
248

249
### Hot Module Replacement
250

251
Update store configuration during development for hot reloading.
252

253
```typescript { .api }
254
/**
255
 * Hot update store configuration
256
 * @param options - Updated store options
257
 */
258
hotUpdate(options: {
259
  actions?: ActionTree<S, S>;
260
  mutations?: MutationTree<S>;
261
  getters?: GetterTree<S, S>;
262
  modules?: ModuleTree<S>;
263
}): void;
264
```
265

266
**Usage Examples:**
267

268
```typescript
269
// Hot update during development
270
if (module.hot) {
271
  module.hot.accept(['./mutations', './actions'], () => {
272
    const newMutations = require('./mutations').default;
273
    const newActions = require('./actions').default;
274
    
275
    store.hotUpdate({
276
      mutations: newMutations,
277
      actions: newActions
278
    });
279
  });
280
}
281
```
282

283
### Vue 3 Plugin Installation
284

285
Install the store as a Vue 3 plugin.
286

287
```typescript { .api }
288
/**
289
 * Install store as Vue 3 plugin
290
 * @param app - Vue application instance
291
 * @param injectKey - Custom injection key (optional)
292
 */
293
install(app: App, injectKey?: InjectionKey<Store<any>> | string): void;
294
```
295

296
**Usage Examples:**
297

298
```typescript
299
import { createApp } from 'vue';
300
import { createStore } from 'vuex';
301

302
const app = createApp(App);
303
const store = createStore({ /* options */ });
304

305
// Install with default key
306
app.use(store);
307

308
// Install with custom key
309
import { InjectionKey } from 'vue';
310
const key: InjectionKey<Store<StateType>> = Symbol();
311
app.use(store, key);
312
```