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

vue之vuex的简单使用简化写法-尅爱的小狗
尅爱的小狗
擅长邻域:Java,HTML,JavaScript,MySQL,支付,退款,图片上传

2021-11-27 23:27:39   255浏览 分类: vue

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

飞一样的编程 能力:450

2021-12-10 01:57:02

牛皮的
点击加载更多
客服QQ 1913284695