vue之vuex的简单使用简化写法

无敌的宇宙
无敌的宇宙
擅长邻域:Java,HTML,JavaScript,MySQL,支付,退款,图片上传

分类: vue 标签: vue之vuex的简单使用简化写法

2021-11-27 23:27:39 1804浏览

vue之vuex的简单使用简化写法

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//状态对象
const state={
counter:0
}
//包含多个更新state函数的对象
const mutations={
ADD(state){
state.counter++
},JJ(state){
state.counter--
}
}
//包含多个事件回调函数的对象,actions调用mutations
const actions={
add({commit}){
commit('ADD');
},
jj({commit}){
commit('JJ');
},
//待条件的action
jjadd({commit,state}){
if(state.counter%2===1)
commit('ADD');
},
autoadd({commit}){
setTimeout(()=>{
commit('ADD');
},1000)
}
}
//包含多个更新state函数的对象
const getters={
desc(state){//不需要亲自调用,只需要读取属性值
return state.counter%2===0?'偶数':'奇数';
}
}
export default new Vuex.Store({
state,//状态对象
mutations,//包含多个更新state函数的对象
actions,//包含多个事件回调函数的对象
getters//包含多个getter计算属性函数的对象
})


mian.js

//入口js,创建vue实例
import Vue from 'vue'

import App from './App.vue'

import store from './store'


new Vue({
el:'#app',
components:{
App,

},
template:'<App/>',
store,//所有的组件对象都多了一个$store属性
})


vue.app

<template>
<div>
<!-- <p>clicked {{$store.state.counter}},counter is {{desc}}</p>-->
<p>clicked {{counter}},counter is {{desc2}} </p>
<p>
<button @click="add">+</button>
<button @click="jj">-</button>
<button @click="jjadd">奇数+1</button>
<button @click="autoadd">过一秒自动+1</button>
</p>
</div>

</template>

<script>
/*简化代码,(模板里数据尽量和store里的属性)尽量同名,同名直接用数组,不同名用map来对应*/
import {mapState,mapGetters,mapActions} from 'vuex';
export default {

name:'App',
data(){
return {

}
},
computed:{
...mapState(['counter']),
...mapGetters({desc2:'desc'}),/*不同名的情况*/
},
methods:{
...mapActions(['add','jj','jjadd','autoadd']),
}

}
</script>
<style>


</style>


好博客就要一起分享哦!分享海报

此处可发布评论

评论(1展开评论

飞一样的编程 能力:470

2021-12-10 01:57:02

牛皮的
点击查看更多评论

展开评论

您可能感兴趣的博客

客服QQ 1913284695