How to install and use vuex

This article mainly explains "how to install and use vuex". 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 install and use vuex.

What is vuex?

Vuex is a state management tool for vue.js development. In the development of a project, component parameters are frequently used to synchronize values in data. Once the project becomes large, managing and maintaining these values will be a tricky task. To this end, Vue provides a unified management tool, VueX, for these values that are frequently used by multiple components. In a Vue project with VueX, we only need to define these values in the VueX to be used in the components of the entire Vue project.

Installation and use of vuex

1. Install Vuex using npm

Npm i vuex-s

two。 Add a new store folder under the root of the project, and create an index.js; directory within this folder with the following structure:

│ App.vue

│ main.js

│

├─ assets

│ logo.png

│

├─ components

│ HelloWorld.vue

│

├─ router

│ index.js

│

└─ store

Index.js

3. Initialize the index.js content under the store folder

Import Vue from 'vue'

Import Vuex from 'vuex'

/ / Mount Vuex

Vue.use (Vuex)

/ / create a VueX object

Const store = new Vuex.Store ({

State: {

/ / the stored key-value pair is the state to be managed

Name:'helloVueX'

}

})

Export default store

4. Mount store to the Vue instance of the current project (Note: add the following to the main.js file)

Import Vue from 'vue'

Import App from'. / App'

Import router from'. / router'

Import store from'. / store'

Vue.config.productionTip = false

/ * eslint-disable no-new * /

New Vue ({

El:'# app'

Router

Store, / / store:store, like router, mount the Vuex instance we created to this vue instance

Render: h = > h (App)

})

5. Using vuex in components

Name:

{{$store.state.name}}

Under what circumstances should I use Vuex

Vuex can help us manage shared state and comes with more concepts and frameworks. This requires a tradeoff between short-term and long-term benefits.

If you don't plan to develop large single-page applications, using Vuex can be tedious and redundant. That's true-if your application is simple enough, you'd better not use Vuex. A simple store schema is enough for you. However, if you need to build a medium-to-large single-page application, you are likely to consider how to better manage state outside the component, and Vuex will be a natural choice.

The relationship between vue and vuex

First of all, vue is a front-end framework, vuex is just a plug-in to vue, the official website says that vuex is a state management tool, but to put it bluntly, vuex is a container for storing, changing, and processing data shared by multiple components, that is, to store tools for dealing with public data. When the stored data changes, each component will be updated, that is to say, the stored data is responsive.

Thank you for your reading, the above is the content of "how to install and use vuex". After the study of this article, I believe you have a deeper understanding of how to install and use vuex, 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!