Getting Started with VUE3 Development: Using Vuex State Management

VUE3 is an exciting new generation of VUE framework, which has greatly improved performance, maintainability and development experience. In VUE3, Vuex is a very important state management tool that can help us better manage the state of the application.

This article will introduce how to use Vuex in VUE3, including how to create a Vuex store, how to use Vuex in components, how to perform asynchronous operations in Vuex, how to use plug-ins, etc.

Create Vuex store

First, we need to install Vuex:

npm install vuex@next

Next, create a Vuex store, we can create it in the VUE3 entry file (such as main.js) Add the following code:

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

Here, we created a VUE instance by using createApp, and then used the store plugin to add the Vuex store to the application. Now we need to create a store folder, and then create an index.js file in it:

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

Here, we first create a Vuex store using the createStore function and specify a Initial state count: 0. Then, we define a mutation named increment, which takes state as a parameter and increments state.count by 1. Finally, we export the store for use in our application.

Using Vuex in components

Now that we have created the Vuex store, we will use it in the component. We will use count and incrementmutation in a Counter component.

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

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

Here, we first use the calculated property count to get the current value of store.state.count, and then add a click event on the button, calling incrementmutation.

Now we can use the Counter component in our application and it will automatically connect to the Vuex store.

Asynchronous operations

Sometimes, we need to perform asynchronous operations in the Vuex store, such as sending HTTP requests. In this case we can use the actions option from the example code.

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      todos: []
    }
  },
  mutations: {
    setTodos(state, todos) {
      state.todos = todos
    }
  },
  actions: {
    async fetchTodos({ commit }) {
      const response = await fetch('/api/todos')
      const todos = await response.json()
      commit('setTodos', todos)
    }
  }
})

export default store

Here, we first define a mutation named setTodos and set the incoming todos parameter to state.todos. We then define an action called fetchTodos using the actions option, which will trigger an asynchronous operation to fetch the todos data and call commit upon completion Trigger setTodosmutation.

Using plug-ins

We can use plug-ins to extend the functionality of the Vuex store. For example, we can use the vuex-persistedstate plugin to make the Vuex store persistent so that the store's state is not reset every time the page is refreshed.

First, we need to install the plugin:

npm install vuex-persistedstate

Then, we can add the plugin to the store:

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  // ...
  plugins: [createPersistedState()]
})

export default store

Here, we start from vuex-persistedstateImported the createPersistedState function and then added it to the store as a plug-in.

Summary

In this article, we learned how to use Vuex state management in VUE3. We learned how to create a Vuex store, how to use Vuex in components, how to perform asynchronous operations in Vuex, and how to use plugins to extend the functionality of Vuex.

Using Vuex can help us better manage the state of our application, make our application more maintainable, and provide a better foundation for future expansion.

The above is the detailed content of Getting Started with VUE3 Development: Using Vuex State Management. For more information, please follow other related articles on the PHP Chinese website!