An article takes you to Vuex

Before writing Vuex, let's implement a small demo with a simple example

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>{{msg}}</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.

1,state

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 class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  computed:{
    products(){
      return this.$store.state.products;
    }
  },
}
</script>
2,getters

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 class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  computed:{
    ...mapGetters([
      "saleProducts"
    ])
  }
}
</script>
3,mutations

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 class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</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>


4,actions
  • 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 class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</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

174 original articles published, 584 praised, 1.81 million visitors+
His message board follow

Tags: Vue npm

Posted on Wed, 12 Feb 2020 04:38:05 -0500 by Panthers