项目代码结构↓
src内容↓
store内容↓
理解思路: component中的组件发送修改请求,由action.js处理请求,mutation修改请求,修改请求后state改变,从getter.js中可获取更新后的state中的数据。
state.js中为初始数据
const state={
count:0
}; export default state;
action.js中的内容
import * as types from './types'; const actions={
increment:({
commit,state
},payload)=>{
// alert(payload);
payload=payload||1;
commit(types.INCREMENT,payload);
},
decrement:({
commit,state
})=>{
commit(types.DECREMENT);
},
async:({
commit,state
})=>{
setTimeout(()=>{//请求数据
commit(types.INCREMENT);
},1000);
},
odd:({
commit,state
})=>{
if(state.count % 2 == 0){
commit(types.INCREMENT);
}
}
}; export default actions;
mutation.js的内容
import {
INCREMENT,
DECREMENT
} from './types'; const mutations={
[INCREMENT]:(state,payload)=>{
// alert(payload);
payload=payload||1;
state.count+=payload;
},
[DECREMENT]:(state)=>{
state.count--;
}
}; export default mutations;
type.js的内容
export const INCREMENT='INCREMENT'; //加 描述
export const DECREMENT='DECREMENT'; //减 描述
getter.js的内容
const getters={
count:(state)=>{
return state.count;
}
}; export default getters;
在App.vue(或其他组件)中获取、修改state中的状态↓
<template>
<div id="app">
<h1>vuex</h1>
<input type="button" value="+" @click="increment(2)">
<input type="button" value="-" @click="decrement">
<input type="button" value="异步+" @click="async">
<input type="button" value="偶数+" @click="odd">
<br/>
越过getters向state拿:{{$store.state.count}}
<br/>
{{count}}/{{count%2==0?'双数':'单数'}}
<br/>
<input type="button" value="修改私有数据" @click="check">
<br/>
{{n}}
</div>
</template> <script>
import {mapActions,mapGetters} from 'vuex';
export default {
name: 'app',
data () {
return {
n:0
}
},
methods:{ // 私有方法和 请求并存
check(){
this.n='bmw';
},
...mapActions(
['increment','decrement','async','odd']
)
},
computed:mapGetters(
['count']
), mounted(){
//代码里面直接发请求 actions
// this.$store.dispatch('increment',121); //代码里面直接发请求 mutations
// this.$store.commit('INCREMENT',['apple','banana','orange','西游记']); }
}
</script> <style> </style>