1state
引入vuex 以后,我们需要在state中定义变量,类似于vue中的data,通过state来存放状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { //存放状态
nickname:'Simba',
age:20,
gender:'男'
},
mutations: {},
actions: {},
modules: {}
})
注册两个组件分别引入到app.vue中
<div id="app">
<about> </about>
<home> </home>
</div>
home组件中内容
<div class="home">{{$store.state.nickname}}</div>
about组件中内容
<h1>{{$store.state.nickname}}:{{$store.state.age}}</h1>
浏览器显示结果
如图,显示出显示出相应的内容,有了vuex,我们不必在考虑组件之间的传值,直接就可以通过$store来获取不同的数据,但是如果需要vuex中的多个数据的这时候,这样写就太啰嗦了,我们可以将它定义在computed中。
Props,methods,data和computed的初始化都是在beforeCreated和created之间完成的。
例:
<template>
<div class="home">
{{nickname}}
</div>
</template>
<script>
export default {
name: 'home',
computed:{
nickname(){
return this.$store.state.nickname
}
}
}
</script>
mapState 辅助函数
state的方法虽然引入的时候方便了,但是computed中定义的代码还是很多,而这时候vuex又给我们提供了更简便的方法mapState方法
import {mapState} from 'vuex'
export default {
name: 'home',
computed: mapState(['nickname','age','gender'])
}
mapState(['nickname','age','gender']) //映射哪些字段就填入哪些字段
这一句代码就相当于下面这些代码的作用
nickname(){return this.$store.state.nickname}
age(){return this.$store.state.age}
gender(){return this.$store.state.gender}
记住:用mapState等这种辅助函数的时候,前面的方法名和获取的属性名是一致的。
如果我们需要自定义一个计算属性怎么办呢?怎么添加呢?
毕竟现在已经成这样了 computed: mapState([‘nickname’,‘age’,‘gender’])
这时候我们就需要es6中的展开运算符:…
computed: { //computed是不能传参数的
value(){
return this.val/7
},
...mapState(['nickname','age','gender'])
}
getters
getters相当于vue中的计算属性,通过getters进一步处理,得到我们想要的值,而且允许传参,第一个参数就是state
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { //存放状态
nickname:'Simba',
firstname:'张',
lastname:'三丰',
age:20,
gender:'男',
money:1000
},
getters:{
realname(state){
return state.firstname+state.lastname
},
money_us(state){
return (state.money/7).toFixed(2)
}
},
mutations: {},
actions: {},
modules: {}
})
vue部分
computed: { //computed是不能传参数的
valued(){
return this.value/7
},
...mapGetters(['realname','money_us'])
}
Mutation
我们代码中定义的时候需要些mutations,它类似于vue中的methods,
mutations需要通过commit来调用其里面的方法,它也可以传入参数,第一个参数是state,第二个参数是载荷(payLoad),也就是额外的参数
代码如下
mutations: { //类似于methods
addAge(state,payLoad){
state.age+=payLoad.number
}
}
template部分
<div class="home">
<div><button @click="test">测试</button></div>
</div>
js部分
methods:{
test(){
this.$store.commit('addAge',{
number:5
})
}
}
调用的时候第二个参数最好写成对象形式,这样我们就可以传递更多信息。
但是,这样写还是会遇到同样的问题,就是如果需要操作多个数据,就会变的麻烦,这时候我们就需要mapMutations,通过它将方法映射过来
mapMutations
跟mapState、mapGetters一样
methods:{
...mapMutations(['addAge'])
}
mapMutations([‘addAge’])这一句就相当于下面的代码
addAge(payLoad){
this.$store.commit('addAge',payLoad)
}
参数我们可以在调用这个方法的时候写入
<button @click="addAge({number:5})">测试</button>