How to use vuex4

This article mainly explains "how to use vuex4". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use vuex4.

I. installation and initialization

Vuex4 installation:

Npm install vuex@next

In order to keep up with the vue3 initialization mode, the vuex4 initialization method has been changed accordingly, using the new createStore function to create a new store instance.

Import {createApp} from 'vue'import App from'. / App.vue'import router from'. / router'import {createStore} from "vuex" const store = createStore ({state () {return {num:1,}) const app = createApp (App) app.use (router) app.use (store) app.mount ('# app') / / used within the component as before {{$store.state.num}}

Second, the use of vuex4 in the component

2.1. Use scenario 1

Used directly in the template of the component, consistent with the previous api

/ const store = createStore ({state () {return {num:1,}}, mutations: {addNum (state) {state.num++}}, actions: {}, modules: {}}) / / in the component {{$store.state.num}} num is self-added

2.2, usage scenario 2

Introduce store into the component through useStore, and then manipulate store.

Store component {{state.num}} num add import {useStore} from "vuex" export default {setup () {const store = useStore () return {state:store.state, add () {store.commit ('addNum')}

2.3, usage scenario 3

When multiple values are used in store, you can expand the data in store.state directly through the toRefs method.

{{num}} num self-added import {useStore} from 'vuex'import {toRefs} from "vue" export default {setup () {const store = useStore () return {... toRefs (store.state), add () {store.commit (' addNum')}

III. The usage of getters

To be consistent with previous usage:

Const store = createStore ({state () {return {num:1,}}, getters: {doubleNum (state) {return state.num*2}},}) / use 1: use {{$store.getters.doubleNum}} directly in template / / use 2: get {{getDouble}} import {useStore} from "vuex" import {computed} from 'vue'export default {setup () {const store = useStore () return {state:store.state GetDouble:computed (() = > store.getters.doubleNum)}

IV. The usage of mutations and actions

When calling a method within mutations, use the commit call. The above usage scenario 2 is the call to the mutations method.

However, when actions updates the data in state asynchronously, it still needs to go through mutations.

{{state.num}} Update num import {useStore} from "vuex" export default {setup () {const store = useStore () return {state:store.state, asyncUpdateNum () {store.dispatch ('updateNum',88)}

The store container can be accessed within the component through the this.$store property, and the composition API can be replaced by useStore. The other uses are basically the same.

Thank you for your reading, the above is the content of "how to use vuex4", after the study of this article, I believe you have a deeper understanding of how to use vuex4, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!