Preface
In the previous projects, I encountered some places where communication between components is needed, and for various reasons,
The cost of event bus is higher than that of vuex, so vuex is used in the technical selection, but I don’t know why.
Some newcomers in the team started to back down when they heard about vuex, because vuex is difficult? Is it really difficult?
Today we use simple 3 steps to prove how simple vuex is.
It is purely personal experience, and there are inevitably incorrect things. If you find any, please feel free to correct me!
This is an entry-level tutorial, entry-level tutorial, entry-level tutorial for beginners
Step 0
Create a new vue project and install vuex. I won’t give too much introduction here. If you can click in, you will have these skills by default ^_^
first step
Create a new .js file with any name and location. According to convention, it is recommended to use the /src/store directory (if you don’t have it, create a new one yourself)
File location /src/store/
// Introduce vue and vueximport Vue from 'vue'
import Vuex from 'vuex'
// You need to use it here, and the fixed writing method is remembered(Vuex)
// Export a Store instance directlyexport default new ({
// similar data to vue state: {
name: 'oldName'
},
// Similar to the motions in vue (synchronization method) mutations: {
updateName (state) {
= 'newName'
}
}
})
The code looks a little bit more, but does it look very familiar? It's not much different from ordinary vue.
This step is actually to create a new store, but we have not used it in the project yet.
Step 2
Introduce the above file in the entry file and slightly change the parameters passed to new Vue(). There are notes after the added line
File location /src/ (the entry generated by vue-cli automatically. If you can avoid scaffolding, then I don’t need to explain it)
import Vue from 'vue'
import App from './App'
import vuexStore from './store' // Added
new Vue({
el: '#app',
store:vuexStore // Added components: { App },
template: '<App/>'
})
Tip: import store from './store' The address behind it is where we created the new file above (/src/store/),
Because I am here, I can omit it.
Step 3
The above 2 steps have actually completed the basic configuration of vuex, and the next step is to use it.
File location /src/ (also generated by vue-cli. I removed the extra code here for the convenience of demonstration)
<template>
<div>
{{getName}}
<button @click="changeName" value="Rename Change">Rename change</button>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
computed:{
getName(){
return this.$
}
},
methods:{
changeName () {
this.$('updateName')
}
}
}
</script>
This is a very ordinary vue file. The difference is that we need to use the computed attribute to get the "data" in the store
Also, if we want to change the data, we no longer use = xxx to change it to this.$('updateName')
Summarize
You may think, what is the significance of doing this in the above example? Why not just use vue data and methods?
The above example is just to briefly explain how to use vuex, so it simplifies some process. Just imagine, if you have a page like this:
A total of 10 layers of components are nested (that is, there are sub-sub-components inside the sub-components, and so on 10 layers)
Then the last layer of component changes the data. To notify the first layer of component, we only need this.$() in the lowest layer of component,
Then use the computed attribute to obtain the corresponding value on the outermost component to achieve real-time updates. There is no need to go up the $emit layer.
at last
I originally wanted to expand on getter, action+dispatch, modularity, etc. at the end, but to be worthy of this title.
Consolidation of advanced knowledge points in VUEX
Share with you the source code introduced in this article:/noahlam/articles