This time I will show you how to use Vuex state management, what are the precautions when using Vuex state management, the following is a practical case, let's take a look.
Vuex is a tool designed for Vue.js
State management patterns for application development. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way. Vuex is also integrated into
Vue's official Debugging tool devtools extension provides advanced debugging functions such as zero-configuration time-travel debugging, status snapshot import and export, etc.
The above is the introduction of vuex in the official document of vuex. The official document explains the usage of vuex in detail. I won’t go into details about the usage of vuex here. The purpose of writing this blog is just to help some students understand and get started with vuex faster.
1. Install
1 | $ npm install vuex --save
|
Copy after login
2. Reference store.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store'
Vue.config.productionTip = false
new Vue({
el: '#app' ,
router,
store,
template: '<app></app>' ,
components: { App }
})
|
Copy after login
in main.js main entrance js
3. Reference Vuex
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import Vue from 'vue'
import Vuex from 'vuex'
Vue. use (Vuex)
const state = {
count : 1
}
const mutations = {
jia(state){
state. count ++
},
jian(state){
state. count --
},
}
export default new Vuex.Store({
state,
mutations
})
|
Copy after login
in store.js
4. Use
in vue component
Use the $store.commit('jia') area to trigger the addition and subtraction methods below mutations
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <template>
<p>
</p>
<h1>Hello Vuex</h1>
<h5>{{ $store .state. count }}</h5>
<p>
<button>+</button>
<button>-</button>
</p>
</template>
<!-- 加上scoped是css只在这个组件里面生效,为了不影响全局样式 -->
<style>
h5{
font-size: 20px;
color: red;
}
</style>
|
Copy after login
5. View the demo

6. state access state object
Use computed calculation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <template>
<p>
</p>
<h1>Hello Vuex</h1>
<h5>{{ count }}</h5>
<p>
<button>+</button>
<button>-</button>
</p>
</template>
<script>
import {mapState} from 'vuex'
export default {
name:'hello',
computed:mapState({
count :state => state. count + 10
})
}
</script>
|
Copy after login
7. Mutations trigger state (synchronization state)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <template>
<p>
</p>
<h1>Hello Vuex</h1>
<h5>{{ count }}</h5>
<p>
<button>+</button>
<button>-</button>
</p>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default {
name:'hello',
computed: mapState([
' count '
]),
methods:{
...mapMutations([
'jia',
'jian'
])
}
}
</script>
|
Copy after login
8. Getters calculate property
Getter cannot use arrow functions, which will change the pointing of this
Add getters
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | const getters = {
count (state){
return state. count + 66
}
}
export default new Vuex.Store({
state,
mutations,
getters
})
组件中使用
<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
name:'hello',
computed: {
...mapState([
' count '
]),
...mapGetters([
' count '
])
},
methods:{
...mapMutations([
'jia',
'jian'
])
}
}
</script>
|
Copy after login
in store.js
9. actions (asynchronous state)
Add actions
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | import Vue from 'vue'
import Vuex from 'vuex'
Vue. use (Vuex)
const state = {
count : 1
}
const mutations = {
jia(state){
state. count ++
},
jian(state){
state. count --
},
}
const getters = {
count (state){
return state. count + 66
}
}
const actions = {
jiaplus(context){
context.commit( 'jia' )
setTimeout(()=>{
context.commit( 'jian' )
},2000)
alert( '我先被执行了,然后两秒后调用jian的方法' )
},
jianplus(context){
context.commit( 'jian' )
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
|
Copy after login
in store.js
Use
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <template>
<p>
</p>
<h1>Hello Vuex</h1>
<h5>{{ count }}</h5>
<p>
<button>+</button>
<button>-</button>
</p>
<p>
<button>+plus</button>
<button>-plus</button>
</p>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:'hello',
computed: {
...mapState([
' count '
]),
...mapGetters([
' count '
])
},
methods:{
...mapMutations([
'jia',
'jian'
]),
...mapActions({
jiaplus: 'jiaplus',
jianplus: 'jianplus'
})
}
}
</script>
<style>
h5{
font-size: 20px;
color: red;
}
</style>
|
Copy after login
in components
10. modules module
Suitable for very large projects with many statuses, easy to manage
Modify store.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | import Vue from 'vue'
import Vuex from 'vuex'
Vue. use (Vuex)
const state = {
count : 1
}
const mutations = {
jia(state){
state. count ++
},
jian(state){
state. count --
},
}
const getters = {
count (state){
return state. count + 66
}
}
const actions = {
jiaplus(context){
context.commit( 'jia' )
setTimeout(()=>{
context.commit( 'jian' )
},2000)
alert( '我先被执行了,然后两秒后调用jian的方法' )
},
jianplus(context){
context.commit( 'jian' )
}
}
const moduleA = {
state,
mutations,
getters,
actions
}
const moduleB = {
state: {
count :108
}
}
export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB,
}
})
|
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
The above is the detailed content of How Vuex state management should be used. For more information, please follow other related articles on the PHP Chinese website!