Vuex 中getters的使用
一,Vuex 中getters的使用 vuex 中的getters 想当于vue中的computed ,getters是vuex 中的计算属性 ,计算属性写起来是方法,但它是个属性二,getters 使用案例计数器(代码直接粘贴复制即可用)import Vue from 'vue'import App from './App'import router from './rout...
·
一,Vuex 中getters的使用
vuex 中的getters 想当于vue中的computed ,getters是vuex 中的计算属性 ,计算属性写起来是方法,但它是个属性
二,getters 使用案例计数器(代码直接粘贴复制即可用)
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import logger from 'vuex/dist/logger'// logger 是一个日志插件
Vue.use(Vuex);
// 容器是唯一的
const state={count:0}; // 状态 将统一管理的状态放在state里面
// mutations 里面 这里的目的是更改状态的
const mutations={
add(state,count){// state 是默认放入的,是指的当前的stroe
state.count+=count;
},
minus(state,count){
state.count-=count;
}
};
const getters={// getters 的使用 默认参数就是state 对state里面的状态进行处理
val:(state)=>state.count%2?'奇数':'偶数'
}
// getters 和mutations 一样需要注册到store 里面
const store= new Vuex.Store({
state,
mutations,
strict:true,
getters,
plugins:[logger()],
});
new Vue({
el: '#app',
router,
render: h => h(App),
store
// store 被注册到了实例上 所有组件都会有一个属性 this.$store 它指的就是store这个实例
});
<template>
<div class="count">
计数器:<button @click="minus">-</button><br>
<br><br><br>
当前:{{this.$store.state.count}}<br>
<br><br><br>
计数器:<button @click="add">+</button>
{{$store.getters.val}}
<!--getters.val 获取val-->
</div>
</template>
<script>
export default {
name: "counter",
data(){
return {
msg:'你好'
}
},
methods:{
add(){// 提交add的mutation 第一个名字是找store里面的add 第二个参数时载荷即payload
this.$store.commit('add',2)
},
minus(){// 提交add的mutation 第一个名字是找store里面的add 第二个参数时载荷即payload
this.$store.commit('minus',1)
}
},
}
</script>
<style scoped>
.count{
font-size: 20px;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)