vue之vuex的简单使用简化写法
分类: 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>
好博客就要一起分享哦!分享海报
他的专栏
他感兴趣的技术