Vue3+TS+Vite development skills: How to use Vuex for state management

Vue3 TS Vite development skills: How to use Vuex for state management

Introduction:
In Vue development, state management is an important topic. As Vue’s officially recommended state management tool, Vuex is very commonly used in projects. This article will introduce how to use Vuex for state management and develop with Vue3, TypeScript and Vite.

1. Install dependencies
First, we need to install Vuex and vuex@4 versions in the project to support Vue3:

npm install vuex@next --save

2. Create store
Create a store directory in the src directory and create an index.ts file. In the index.ts file, we need to define the Vuex Store instance and export the instance for global use.

// store/index.ts
import { createStore } from 'vuex';

const store = createStore({
  // 定义state
  state: {
    count: 0,
  },
  // 定义mutations
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  // 定义actions
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    },
  },
});

export default store;

3. Create main.ts
In the main.ts file in the src directory, we need to import the Vuex store and use the store in the createApp function.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App)
  .use(store)
  .mount('#app');

4. Using Vuex
Now, we have set up the basic configuration of Vuex. Next, we can use Vuex in the component.

In App.vue, we map the count value in the store to the component by using the mapState auxiliary function, and by using the mapMutations auxiliary function. Trigger the increment mutation in the store.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
  },
};
</script>

So far, we have completed the basic use of Vuex in the Vue3 TS Vite project. By using Vuex, we can easily manage the global state of the application and achieve state sharing and communication, improving development efficiency and code maintainability.

Summary:
This article introduces how to use Vuex for state management in the Vue3 TS Vite project. By installing dependencies, creating store instances, and using Vuex auxiliary functions, we can easily use Vuex in the project to manage and share global state.

The above is an introduction to how to use Vuex for state management in Vue3 TS Vite development skills. I hope it will be helpful to your development practice. If you have any questions, please feel free to discuss them.

The above is the detailed content of Vue3+TS+Vite development skills: How to use Vuex for state management. For more information, please follow other related articles on the PHP Chinese website!