场景
数据集中式管理
定义数据
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
//场景: 定义数据
state: {
name: 'hello Vuex',
age:'18',
role:2
},
//场景: 改变state的 值
mutations: {
//自定义方法
edit(state, payload){
state.name = 'zhangsan'
Vue.delete(payload,'age') //删除对象中的属性
Vue.set(payload,'host','192.168.1.1') //如果对象中不存在属性,则新增一个
console.log(payload);
}
},
//场景: 对变量进行计算后, 返回, 这个类似computed功能
getters: {
//这里可以对state中定义的变量进行计算, 在需要的地方使用
nameInfo(state){
return "姓名:"+state.name
},
//getters: 用于获取其他getters属性
fullInfo(state, getters){
return getters.nameInfo+",年龄:"+state.age
},
//场景: 对变量进行计算后, 返回
roleName(state){
switch (state.role) {
case 1:
return '管理员'
case 2:
return '项目经理'
case 3:
return '职员'
}
}
},
//处理异步
actions: {
aEdit(context, payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
}
}
});
export default store
调用
App.vue
<template>
<div id="app">
<!--直接用-->
name: {{$store.state.name}} <br>
<!--修改数据-->
<button @click="add">vuex button test</button>
<br/>
<!--调取计算后的数据-->
-------------------------------------------------<br>
getters:<br/>
{{$store.getters.fullInfo}}<br>
{{$store.getters.roleName}}<br>
<!--异步处理数据-->
actions: <br>
<button @click="edit">action button test</button>
<br>
-------------------------------------------------<br>
<!--另一种方式调用数据-->
mapGetters: <br>
{{rname}} - {{uname}}
</div>
</template>
<script>
import {mapGetters,mapState,mapMutations} from 'vuex'
export default {
name: 'App',
components: {
},
methods: {
add: function () {
//方式一
//this.$store.commit('edit',{"name":"lisi","age":"18"})
//console.log(this.$store.state);
//方式二
/*this.$store.commit({
type:'edit',
payload: {
"name": "hanmeimei",
"age": 18
}
})*/
//方式三
this.modify({"test":'test'})
},
edit(){
//异步处理
this.$store.dispatch('aEdit',{country: '中国'})
},
//三个点的意思就是把edit函数拷贝过来
...mapMutations({
'modify': 'edit'
})
},
computed: {
//直接用
//...mapGetters(['roleName'])
//取个别名在用
...mapGetters({
'rname': 'roleName'
}),
...mapState({
'uname': 'name'
})
}
}
</script>
<style>
</style>