什么是vuex
vuex是一个专为vue.js应用程序开发的状态管理模式
什么是状态管理
先了解下单向数据流 帮助我们更好地理解状态管理。平时我们写的简单vue文件中，包含data，template，methods这三个部分可以分别把data看作 state，驱动应用的数据源，也就是定义的变量； template 看作 view 以声明方式将 state 映射到视图, 显示变量； methods 看作 actions，响应在 view 上的状态变化
初步了解vuex中的state，getter，mutation，action
- state：定义变量 getters：获取变量
- mutations：同步执行对变量进行的操作 actions：异步执行对变量进行的操作 vuex中的mapState，
- mapGetters，mapActions，mapMutations均是辅助函数
如何使用
-
mapState引入vuex以后 我们需要在state中定义变量，类似cue中的data，通过state来存放状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
name:'杨彤彤',
age:18,
sex:'女'
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
- 我们如果想着组件中使用name，age，sex这三个属性，props，methods，data和computed的初始化都是在beforeCreated和created之间完成的，所以我们要在computed使用
<template>
<div class='home'>
<div>名字:{{name}}</div>
<div>年龄:{{age}}</div>
<div>性别:{{sex}}</div>
</div>
</template>
<script>
export default {
computed: {
name(){
return this.$store.state.name
},
age(){
return this.$store.state.age
},
sex(){
return this.$store.state.sex
}
}
}
</script>
- 当一个组件需要获取多个状态的时候，将这些状态都声明计算属性会有些许重复，为了解决这个问题，我们可以使用mapState来辅助完成计算属性
<template>
<div class='home'>
<div>名字:{{name}}</div>
<div>年龄:{{age}}</div>
<div>性别:{{sex}}</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
computed: {
...mapState(['name','age','sex'])
}
}
</script>
mapGetters vuex允许我们在store中定义getter
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
name:'杨彤彤',
age:18,
sex:'女'
},
getters: {
realname(state){
return state.name+state.age
}
},
mutations: {
},
actions: {
},
modules: {
}
})
<template>
<div class='home'>
<div>{{realname}}</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
computed: {
...mapGetters(['realname'])
}
}
</script>
