image.png
下載包：
npm install vuex --save
安裝依賴(lài)
通常和main.js平級(jí)窍荧，創(chuàng)建store.js文件
import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0,//全局默認(rèn)的值
},
getters:{
},
mutations:{
}
})
組件中展示vuex的state數(shù)據(jù)：
展開(kāi)運(yùn)算符展示：
<template>
<div>
{{count}}
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
props: {
},
computed: {
...mapState(['count'])
}
}
</script>
<style scoped>
</style>
普通展示：
<template>
<div class="container">
<!-- 直接訪(fǎng)問(wèn)state的數(shù)據(jù) -->
<span>{{$store.state.count}}</span>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
},
data() {
return {};
},
methods: {
}
};
</script>
用mutation變更state中的數(shù)據(jù)（集中監(jiān)控?cái)?shù)據(jù)的變化）：
import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0,//全局默認(rèn)的值
},
getters:{
},
mutations:{
add(state){
state.count++
},
addN(state,step){
state.count += step
},
sub(state){
state.count--
},
subN(state,step){
state.count -= step
}
}
})
調(diào)用：
<template>
<div>
{{count}}
<button @click="btends1">加+1</button>
<button @click="btends2">加+n</button>
<button @click="btends3">減-1</button>
<button @click="btends4">減-N</button>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default {
props: {
},
computed: {
...mapState(['count'])
},
methods:{
...mapMutations(['sub','subN']),
btends1(){
this.$store.commit('add')
},
btends2(){
this.$store.commit('addN',3)
},
btends3(){
this.sub()
},
btends4(){
this.subN(2)
}
}
}
</script>
<style scoped>
</style>
