How to use the state object of vuex

This article introduces you to 5 ways to use the state object of vuex, and posts the structure of my vuex to you. Friends who are interested can follow the editor of Script Home to learn together

vuex It is a state management mode specially designed for vue.js, and can also be debugged using devtools.

The following is the structure of my vuex.

The following is the content of state.js and index.js under the store folder

//state.js const state = { headerBgOpacity:0, loginStatus:0, count:66 } export default state //index.js import Vue from 'vue' import Vuex from 'vuex' import state from './state' import actions from './actions' import getters from './getters' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({ state, actions, getters, mutations })

Let’s start using the vuex state object in the test.vue component

Method 1

Method Two

Method Three

Method 4

Method five

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the process of reconstructing multi-page scaffolding based on vue cli

About Vue2 Vue-cli Configuration introduction using Typescript

Vue implements the component that returns the top backToTop

The above is the detailed content of How to use the state object of vuex. For more information, please follow other related articles on the PHP Chinese website!