SoFunction
Updated on 2025-03-08

Apply Vuex's state and mutations methods in Vue-cli

First, the dependencies of vuex must be installed

npm install vuex --save-dev

Create folders exclusive to vuex and:

Introduce and apply plug-in vuex

Define the constant state, used to store variables &&Define the constant mutations to store variables:

The exported instance has the parameters of the state and mutations just defined:

Finally, you need to introduce the entry js file into the Vue instance:

After that, we can call the variables and methods we store in vuex in the component:

first:Call the variable headTitle in the parent component:

MapState that calculates the properties computed and vuex needs to be used: (The annotation is also possible, but mapState can introduce multiple variables, which is more convenient)

so,Page <h1> will show that the value of the variable headTitle we saved is "Pocket *"

after,I tried to change the value of headTitle in the child component using the mutations method:

result,Each time the parent component's <h1> will follow the changes.

This is the small application implementation of vuex.

The above article on the state and mutations of Vuex in Vue-cli is all the content I share with you. I hope you can give you a reference and I hope you can support me more.