An article takes you to Vuex

We all know that Vue's father and son are used in many scenarios, such as this:

Parent component:

<template> <div id="app"> <product-list-one :msg='msg'></product-list-one> </div> </template> <script> export default { name: 'app', components:{ 'product-list-one':ProductListOne, }, data () { return { msg:'love' } } } </script>

Sub components:

<template> <div id="product-list-one"> <div>{}</div> </div> </template> <script> props:['msg'] </script>

There are father to son, of course there are also son to father:

Sub components:

<template> <div id="product-list-one"> <button @click="but">click</button> </div> </template> <script> data(){ return { txt:'hello' } }, methods:{ but() { this.$emit('get',this.txt); } } </script>

Parent component:

<template> <div id="app"> <product-list-one :msg='msg' @get='world'></product-list-one> </div> </template> <script> import ProductListOne from './components/ProductListOne.vue' export default { name: 'app', components:{ 'product-list-one':ProductListOne }, methods:{ world(data){ console.log(data) } } } </script>

However, in some scenarios, it is difficult to implement if the parent is used to pass on the child and the word is used to pass on the parent. For instance:

A component and b component communicate with each other. It is more convenient to have a common variable library.
So Vuex came into being, by creating a centralized data store for all components in the program to access.

I. installation

npm install vuex

Two, configuration

Create a store folder in the root directory src, and then create a file named index.js in the folder.

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store({ strict:true, state:{}, getters:{}, mutations:{}, actions:{} });

Then introduce the store in the main.js file under the src folder.

import Vue from 'vue' import App from './App.vue' import {store} from './store/store' new Vue({ store:store, el: '#app', render: h => h(App) })

3, Practical operation

Vuex is divided into four parts:

• state
• getters
• mutations
• actions

So let's talk about it separately.

state is used to store data.

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store({ strict:true, state:{ products:[ {name:"Jack Ma",price:200}, {name:"pony",price:140}, {name:"Ma Dong Mei",price:20}, {name:"Ma Rong",price:10} ] } });

Use this.$store.state.products to get the data.

<template> <div id="product-list-one"> <ul> <li v-for="(product,index) in saleProducts" :key="index"> <span>{}</span> <span>${}</span> </li> </ul> </div> </template> <script> export default { computed:{ products(){ return this.$store.state.products; } }, } </script>

getters are used to get data.

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store({ strict:true, state:{ products:[ {name:"Jack Ma",price:200}, {name:"pony",price:140}, {name:"Ma Dong Mei",price:20}, {name:"Ma Rong",price:10} ] }, getters:{ saleProducts: (state) =>{ var saleProducts = state.products.map(product =>{ return { name: "**" + product.name + "**", price: product.price / 2 }; }); return saleProducts; } } });

Call the method that gets the data.

<template> <div id="product-list-one"> <ul> <li v-for="(product,index) in saleProducts" :key="index"> <span>{}</span> <span>${}</span> </li> </ul> </div> </template> <script> import {mapGetters} from 'vuex' export default { computed:{ ...mapGetters([ "saleProducts" ]) } } </script>

Transitions are used to change the state in a state.

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store({ strict:true, state:{ products:[ {name:"Jack Ma",price:200}, {name:"pony",price:140}, {name:"Ma Dong Mei",price:20}, {name:"Ma Rong",price:10} ] }, getters:{ saleProducts: (state) =>{ var saleProducts = state.products.map(product =>{ return { name: "**" + product.name + "**", price: product.price / 2 }; }); return saleProducts; } }, mutations:{ reducePrice: (state,payload) =>{ state.products.forEach(product =>{ product.price -= payload; }) } } });

mutations are more like event registration, so we need to trigger store.commit().

<template> <div id="product-list-one"> <ul> <li v-for="(product,index) in saleProducts" :key="index"> <span>{}</span> <span>${}</span> </li> </ul> <button @click="reducePrice(2)">Commodity price reduction</button> </div> </template> <script> import {mapGetters} from 'vuex' export default { computed:{ products(){ return this.$store.state.products; }, ...mapGetters([ "saleProducts" ]) }, methods:{ reducePrice (n) { this.$store.commit('reducePrice',n); } } } </script>

• actions is used to commit States, not to commit states directly.
• actions can contain any asynchronous operation.

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store({ strict:true, state:{ products:[ {name:"Jack Ma",price:200}, {name:"pony",price:140}, {name:"Ma Dong Mei",price:20}, {name:"Ma Rong",price:10} ] }, getters:{ saleProducts: (state) =>{ var saleProducts = state.products.map(product =>{ return { name: "**" + product.name + "**", price: product.price / 2 }; }); return saleProducts; } }, mutations:{ reducePrice: (state,payload) =>{ // setTimeout(function(){ state.products.forEach(product =>{ product.price -= payload; }) // },3000); } }, actions:{ reducePrice:(context,payload) =>{ setTimeout(function(){ context.commit("reducePrice",payload); // context.commit() is equivalent to this.$store.commit(), which triggers the mutations event. },2000); } } });

We need to trigger actions with store.dispatch(), but for convenience, we use mapActions here.

<template> <div id="product-list-one"> <ul> <li v-for="(product,index) in saleProducts" :key="index"> <span>{}</span> <span>${}</span> </li> </ul> <button @click="reducePrice(2)">Commodity price reduction</button> </div> </template> <script> import {mapGetters} from 'vuex' import {mapActions} from 'vuex' export default { props:['msg'], data(){ return { txt:'hello' } }, computed:{ products(){ return this.$store.state.products; }, ...mapGetters([ "saleProducts" ]) }, methods:{ ...mapActions([ "reducePrice" ]) } } </script>

OK, this is a simple introduction to Vuex. Thank you

• Give the thumbs-up
• Collection
• share
• • Article report

12 February 2020, 04:38 | Views: 6880