In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)05/31 Report--
Today, the editor will share with you the relevant knowledge points of Vue Vuex building vuex environment and vuex summation method. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
Vuex introduces the concept
A Vue plug-in that implements centralized state (data) management in Vue, centrally manages (reads and writes) the shared state of multiple components in vue applications, is also a way of communication between components, and is suitable for communication between arbitrary components.
When you need to share data using multiple components
Summation case-pure vue version
Create a new Count.vue component and register the reference in App.vue
Import Count from "@ / components/Count"; export default {name: 'App', components: {Count},}
We focus on Count.vue.
The current sum is: {{sum}} 1 2 3 +-current and odd plus one more plus export default {name: "Count", data () {return {n: 1 sum / user selected number sum: 0 and}} Methods: {increment () {this.sum + = this.n}, decrement () {this.sum-= this.n}, incrementOdd () {if (this.sum% 2) {this.sum + = this.n}}, incrementWait () {setTimeout (() = > {this.sum + = this.n}, 500)}} select Button {margin-right: 5px } build a vuex environment
Note:
Version 3 of vuex to be used in vue2
Version 4 of vuex to be used in vue3
Because we are using vue2, we need to install version 3 of vuex
1. Execute npm I vuex@3 to install vuex 3 version
2. Create a store folder under src, and create an index.js in it
Index.js
/ / this file is used to create the core store// in vuex to introduce vueximport Vuex from 'vuex'// into vueimport Vue from "vue"; / / to apply the vuex plug-in Vue.use (Vuex) / / to prepare actions; for actions in the corresponding components const actions = {} / / prepare mutations; for manipulating data (state) const mutations = {} / / prepare state Used to store data const state = {} / / create and expose storeexport default new Vuex.Store ({actions:actions, mutations,//key and value are renamed, abbreviated state,//key and value are renamed, abbreviated})
3. Introduce the store you just wrote into main.js
. / / introduce store//import store from'. / store/index'import store from'. / store'.// to create vmnew Vue ({el: "# app", / / store:store store,// trigger shorthand.})
To run the project, we can print vm and vc, and we can see $store
Summation case-vuex version
We changed the summation case to the vuex version.
1. First give the data to state
So we cut and put the data sum variables in the Count component into the state in index.js, while the methods in the Count component, such as addition increment, use this.$store.dispatch ("method name", variable) to replace the original method. This completes the following parts of the flowchart
Count.vue
The current sum is: {{$store.state.sum}}. Export default {name: "Count", data () {return {n: 1 the number chosen by the user}}, methods: {increment () {this.$store.dispatch ("jia", this.n);}. }}
At the same time, the corresponding method name is added to the action in index.js. From the flow chart on the diagram, things in actions will be handed over to mutations for processing, so you need to call the commit method manually.
The same method name needs to be added to mutation, which can be changed to uppercase to make a distinction. The first parameter in the method is state, and you can deal with the real logic in the method.
Index.js
/ / this file is used to create the core store// in vuex and introduce vueximport Vuex from 'vuex'// into vueimport Vue from "vue"; / / apply the vuex plug-in Vue.use (Vuex) / / prepare actions Actions used in the corresponding components const actions = {/ * jia:function () {} * / abbreviated as: jia (context,value) {console.log ("jia in actions has been called", context,value); context.commit ("JIA", value)}} / / prepare mutations Used to manipulate data (state) const mutations = {JIA (state,value) {console.log ("JIA in mutations was called", state,value); state.sum + = value;}} / / prepare state Used to store data const state = {sum: 0SCR / current and} / / create and expose storeexport default new Vuex.Store ({actions:actions, mutations,//key and value are renamed, abbreviated state,//key and value are renamed, abbreviated})
Log output:
Run the program:
We improve other methods according to the above ideas.
Count.vue
The current sum is: {{$store.state.sum} 1 2 3 +-current and odd plus export default {name: "Count", data () {return {n: 1 jia / user selected number}}, methods: {increment () {this.$store.dispatch ("jia", this.n) }, decrement () {this.$store.commit ("JIAN", this.n);}, incrementOdd () {this.$store.dispatch ("jiaOdd", this.n);}, incrementWait () {this.$store.dispatch ("jiaWait", this.n);} select, button {margin-right: 5px;}
Index.js
/ / this file is used to create the core store// in vuex and introduce vueximport Vuex from 'vuex'// into vueimport Vue from "vue"; / / apply the vuex plug-in Vue.use (Vuex) / / prepare actions Actions used in the corresponding components const actions = {/ * jia:function () {} * / abbreviated as: jia (context,value) {console.log ("jia in actions has been called"); context.commit ("JIA", value)}, jiaOdd (context,value) {console.log ("jianOdd in actions has been called") If (context.state.sum% 2) {context.commit ("JIA", value)}}, jiaWait (context,value) {console.log ("jianWait in actions has been called"); setTimeout (() = > {context.commit ("JIA", value)}} / / prepare mutations Used to manipulate data (state) const mutations = {JIA (state,value) {console.log ("JIA in mutations is called", state,value); state.sum + = value;}, JIAN (state,value) {console.log ("JIAN in mutations is called", state,value); state.sum-= value;}} / / prepare state Used to store data const state = {sum: 0SCR / current and} / / create and expose storeexport default new Vuex.Store ({actions:actions, mutations,//key and value are renamed, abbreviated state,//key and value are renamed, abbreviated})
So far, the function has been realized. Have you noticed that some optimizations have been made here? because nothing is done in the jia and jian methods in index.js, commit is directly given to mutation, while vc can talk to Mutations directly, as shown below:
So we removed the jian method from the actions in index.js, and called the method in mutation directly in Count, that is, we removed the jian method and called commit directly in the decrement method of Count.
Decrement () {this.$store.commit ("JIAN", this.n);}
If there is no network request or other business logic, the component can also go beyond actions, that is, write commit without writing dispatch.
Some doubts and questions.
What is the purpose of context in index.js? We can print context:
You can see the familiar figures such as dispatch, commit and state. We use jiaOdd as an example, when the method logic processing is complex, we can continue to dispatch other methods to share. With state, we can get the sum value:
JiaOdd (context,value) {console.log ("jianOdd in actions has been called", context) If (context.state.sum% 2) {context.commit ("JIA", value)} context.dispatch ("demo", value)}, demo () {/ / deal with some things}, these are all the contents of this article "Vue Vuex Building vuex Environment and vuex Sum method". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.