Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use Vuex in Vue". 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 Vuex in Vue".

Advantages and disadvantages

1. Responsive type

Belongs to the vue ecosystem, and can trigger responsive rendering page updates. (localStorage will not)

two。 Change data in a predictable way

Avoid data contamination

3. No need to convert data

JS native data object writing (no conversion is required). (localStorage needs to be converted)

Shortcoming

1. Complicated

Suitable for large applications, not suitable for small applications

two。 Cannot be persisted (the state in the vuex changes to the initial state after the page is refreshed)

Solution

Combined with localStorage

Vuex-persistedstate plug-in

Working with scen

We can use Vuex when we have multiple pages that need to share data.

In actual development, we generally use it in the following situations:

Information of the currently logged-in user

Information about shopping cart

Collected information

The geographic location of the user

Example

The counter is used to test: one component modifies the value of the counter, and the other two unrelated components can monitor the change of the counter value.

What to do: one component (ComponentA) shares data with two other unrelated components (ComponentB and ComponentC), and the three components are placed externally with Parent.vue.

Install Vuex and introduce 1. Install vuex

Execute under the project directory: npm install vuex

two。 Write store for vuex

Create the directory store, and create a CounterStore.js under it, as follows:

Import Vue from 'vue';import Vuex from' vuex'; Vue.use (Vuex); const couterStore = new Vuex.Store ({state: {count1: 0, count2: 0,}, mutations: {increment1 (state) {state.count1++;}, decrement1 (state) {state.count1--) }, increment2: state = > state.count2++, decrement2: state = > state.count2--,}}); export default couterStore 3.main.js introduced CounterStore.js// The Vue build version to load with the `import`command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from'. / App'import router from'. / router'import CouterStore from'. / store/CounterStore' Vue.config.productionTip = false / * eslint-disable no-new * / new Vue ({el:'# app', router, store: CouterStore, components: {App}, template:''})

According to JS syntax, key and value can be abbreviated when they have the same name: (many tutorials are written this way)

/ / The Vue build version to load with the `import`command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from'. / App'import router from'. / router'import store from'. / store/CounterStore' Vue.config.productionTip = false / * eslint-disable no-new * / new Vue ({el:'# app', router, store, components: {App}, template:''}) Service Code

Code

ComponentA.vue

ComponentA increase: 1st counter decreases: 1st counter

Increase: the second counter decreases: the second counter export default {data () {return {count1: 0, count2: 0,}}, methods: {increment1 () {this.$store.commit ('increment1')}, decrement1 () {this.$store.commit (' decrement1')}, increment2 () {this.$store.commit ('increment2')} Decrement2 () {this.$store.commit ('decrement2')}} .container {margin: 20px Border: 2px solid blue; padding: 20px;}

ComponentB.vue

The value of ComponentB counter: {{msg}} export default {computed: {msg () {return this.$store.state.count1;}} .container {margin: 20px; border: 2px solid blue; padding: 20px;}

ComponentC.vue

The value of ComponentC counter: {{msg}} export default {computed: {msg () {return this.$store.state.count2;}} .container {margin: 20px; border: 2px solid blue; padding: 20px;}

Parent.vue

Parent component import ComponentA from ". / ComponentA"; import ComponentB from ". / ComponentB"; import ComponentC from ". / ComponentC"; export default {name: 'Parent', components: {ComponentA, ComponentB, ComponentC}, data () {return {name:' Tony', age: 20, phoneNumber: '1234567890'}} .outer {margin: 20px; border: 2px solid red; padding: 20px;}

Routin

Import Vue from 'vue'import Router from' vue-router'import Parent from ".. / components/Parent"; Vue.use (Router) export default new Router ({routes: [{path:'/ parent', name: 'Parent', component: Parent,}],}) test

Visit: http://localhost:8080/#/parent

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.