vuex 的基本操作
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:1
},
getters:{
getadd(state) {
return state.count+1
}
},
mutations: {
updateOrder(state, data) {
state.count = data
},
},
actions: {
updateyibu(context, data) {
setTimeout(()=>{
context.commit('updateOrder', data)
},3000)
}
}
})
调用方法
<template>
<div class="int1">
<h1>vuex</h1>
{{$store.state.count}}
{{this.$store.getters.getadd}}
<div class="int2">{{data}}</div>
</div>
</template>
<script>
export default {
data() {
return {
data: "as"
};
},
created() {
this.$store.commit("updateOrder", 2);
this.$store.dispatch('updateyibu',9)
}
};
</script>
<style lang="scss">
.int1 {
width: 100px;
height: 100px;
background-color: #cc4899;
.int2 {
width: 100px;
position: relative;
left: 200px;
height: 100px;
background-color: #00ff88;
}
}
</style>