<template>
<div>
views目录下的页面:vuex状态管理
<div class="home1">vuex状态中初始值state:</div>
<div class="home2">{{mobile}}</div>
<div class="home1" @click="changeWay">使用mutations方法改变vuex状态中初始值state中的值,显示在上面一行</div>
<div class="home1">getter中的对state值进行二次处理:</div>
<div class="home2">{{mobileother}}</div>
<div class="home1" @click="changeAgain">在组件中异步action方法改变state中的值</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
computed:{
mobile(){
return this.$store.state.mobile
},
mobileother(){
return this.$store.getters.getMobile
}
},
methods: {
changeWay(){
this.$store.commit('changeonway',{namezhi:this.mobile})
},
changeAgain(){
this.$allAxios(this, 'login', {
account: '',
shopcode: '',
username: '',
password: ''
}, (res) => {
this.$store.dispatch('changeaction',{list:res.data.data.user_info.account})
})
}
},
};
</script>
<style scoped>
.homebg{
width: 375px;
background: red;
font-size: 20px;
margin: 20px 0;
}
.home1{
font-size: 20px;
margin-bottom: 20px;
}
.home2{
font-size: 20px;
margin:10px 0 20px;
color: salmon;
}
</style>
store文件夹下的vuex状态文件:
const state = {
mobile: '18303570811',
vuexnums: 0,
vuexlist: [],
};
export default state;
const getters = {
getMobile(state) {
return state.mobile + '-----哈哈哈';
}
}
export default getters;
const mutations = {
changeonway(state, value) {
console.log(state)
console.log(value)
state.mobile = value.namezhi + '加上这几个字,在mutations中改变'
}
};
export default mutations;
const actions = {
};
export default actions;
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
state,
actions,
getters,
mutations
})