model.js
const state={ //要设置的全局访问的state对象,初始属性值
showFooter: true,
changableNum:2
};
const getters = { //实时监听state值的变化(最新状态)
isShow(state) { //承载变化的showFooter的值
return state.showFooter
},
isShow(state) { //承载变化的showFooter的值
return state.showFooter+10 //允许我们在 store 中定义“getter”
},
getChangedNum(){ //承载变化的changebleNum的值
return state.changableNum
}
};
const actions = {
hideFooter(context) { //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
context.commit('hide');
},
showFooter(context) { //同上注释
context.commit('show');
},
setNewNum(context,num){ //同上注释，num为要变化的形参
console.log(context)
console.log(num)
context.commit('newNum',num)
}
setNewNum({ commit, state },num){
commit('newNum',num)
}
};
const mutations = {
show(state) { //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
state.showFooter = true;
},
hide(state) { //同上
state.showFooter = false;
},
newNum(state,sum){ //同上，这里面的参数除了state之外还传了需要增加的值sum
state.changableNum+=sum;
}
};
export default{
state,
getters,
mutations,
actions
}
component文件
<template>
<div id="app">
state：
<p>{{stateIsshow}}--stateIsshow</p>
<p>{{ statefilter }} </p>
getters：
<p>{{gettersIsshow}} -- gettersIsshow</p>
<p>{{mapGettersIsshow}} -- mapGettersIsshow</p>
mapActions：
<button @click="clickNum()">getNewNum+30</button>
dispatch：
<button @click="clickShow">dispatch show</button>
<button @click="clickHide">dispatch hide</button>
<button @click="clickgetSet()">clickgetSet</button>
<p>{{getSetShow}} -- getSetShow</p>
</div>
</template>
<script>
import {mapState， mapGetters，mapActions } from 'vuex';
export default {
name: 'App',
data() {
return {
msg: 'App',
}
},
computed:{
...mapState({
stateIsshow:state=>state.count.showFooter,
statefilter:state=>state.count.showFooter+2 //可以处理
}),
...mapGetters({
mapGettersIsshow:'isShow',
mapgetChangedNum:'getChangedNum'
}),
gettersIsshow(){
return this.$store.getters.isShow
},
getSetShow:{
get() {
return this.$store.getters.getChangedNum
},
set(val){
this.$store.dispatch('setNewNum', val)
}
}
},
methods:{
...mapActions({
setNewNum:'setNewNum'
}),
clickNum(){
this.setNewNum(30)
},
clickgetSet(){
this.getSetShow=+20 //只要getSetShow改变，就会触发getSetShow的get，和set
},
clickShow(){
this.$store.dispatch('showFooter');
},
clickHide(){
this.$store.dispatch('hideFooter');
},
},
mounted(){
console.log(this.$store)
},
}
</script>