import Vue from 'vue'
import Vuex from 'vuex'
import rs from './mutations/mm'
Vue.use(Vuex)
export default new Vuex.Store({
// 全局状态
state: {
num: 22,
user: {
username: "张三",
userage: 20,
},
list: []
},
// 计算属性
getters: {
xuAge(state) {
return state.user.userage + 1
}
},
// 修改数据,状态的方法
mutations: {
upAge(state, p) {
console.log(p);
this.state.user.userage++;
this.state.num += p;
},
getContextList(state, payload) {
state.list = payload
},
...rs
},
// 异步修改数据方法
actions: {
getjoke(context) {
let httpUrl = 'https://api.apiopen.top/getJoke?page=1&count=10&type=text'
fetch(httpUrl).then((res) => {
console.log(res);
return res.json()
}).then((res) => {
console.log(res);
// 不能直接修改 this.list = res.result(错误) 需要在mutations 中处理
console.log("list:", res.result);
context.commit('getContextList', res.result)
})
}
},
// vuex 细分模块
modules: {
}
})
vx.vue
<template>
<div id="vx">
<h1> vuex test</h1>
<button @click="addage">add</button>
{{ $store.state.user.userage }}
num:{{ num }}
<h1>{{ $store.getters.xuAge}}</h1>
<ul v-for="(item,index) in $store.state.list" :key="index">
{{ item.name}}
<li>
{{ item.text}}
</li>
</ul>
</div>
</template>
<script>
// 辅助函数
import { mapState,mapMutations,mapGetters,mapActions} from 'Vuex'
export default {
mounted(){
// dispatch 触发 actions 方法
// this.$store.dispatch('getjoke')
this.getjoke()
},
// 方法
methods:{
...mapMutations(['upAge','getContextList']),
...mapActions(['getjoke']),
addage(){
console.log(this);
// this.$store.commit('upAge',10) 提交到mutations upAge处理
// commit 触发mutations 方法
// this.$store.commit('upAge',10)
this.upAge(2)
}
},
// 计算属性
computed:{
...mapGetters(['xuAge',]),
...mapState(['user','num'])
}
}
</script>
<style lang="scss">
$width:375;
@function vw($px){
@return ($px/$width) * 100vw;
}
</style>