vue 状态管理vuex action 用法
index.js
import { createStore } from "vuex";
const store=createStore({
state:{
count:100
},
getters:{
compower(state){
return (id)=>state.count*id
}
},
mutations:{
add(state,n) {
state.count+=n
}
},
actions:{
incre (context,n) {
context.commit('add',n)
}
},
modules:{}
})
export default store
app.vue
<script>
export default {
methods: {
increment(t){
// 在组件中通过commit触发mutations中的函数
this.$store.commit("add",8)
},
incre(b){
// 在组件中通过commit触发mutations中的函数
this.$store.dispatch("incre",b)
}
}
}
</script>
<template>
<div>
<h1>APP</h1>
<router-link to="/home">home</router-link> |
<router-link to="/about">about</router-link> |
<router-link to="/move">move</router-link>
</div>
<p>{{ $store.state.count }}</p> <br>
<p>{{ $store.getters.compower(5)}}</p><br>
<button @click="incre(8)">++</button>
<router-view></router-view>
</template>
<style scoped>
</style>
