1.下载
npm install vuex --save
2.新建文件夹命名store里面创建一个index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({ //导出vuex这个对象
// 待补充
})
3.全局使用vuex
在main.js引入store
import store from './store/index' //引入store
new Vue({
el: '#app',
router,
store, // 使用store
components: { App },
template: '<App/>'
})
state
vuex中的数据源,我们需要保存的数据或定义的一些状态就保存在这里,通过 this.$store.state来获取我们定义的数据;
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({ //导出vuex这个对象
state:{
num: 1
}
})
在页面获取num数据
<template>
<div class="hello">
<h1>{{this.$store.state.num}}<h1> //页面显示1
</div>
</template>
Getters
Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({ //导出vuex这个对象
state:{
num: 1
},
getters:{
getAddCount(state){ //getAddCount定义方法接受state里面的num保存数据
return state.num+1
}
}
})
在页面获取num数据
<template>
<div class="hello">
<h1>{{this.$store.getters.getAddCount}}<h1> //页面显示2
</div>
</template>
Mutations
数据我们在页面是获取到了,但是如果我们需要修改num值怎么办?如果需要修改store中的值唯一的方法就是提交mutation来修改,我们现在页面中添加两个按钮,一个加1,一个减1;这里我们点击按钮调用addFun(执行加的方法)和reductionFun(执行减法的方法),然后在里面直接提交mutations中的方法修改值:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({ //导出vuex这个对象
state:{
num: 1
},
getters:{
getAddCount(state){ //getAddCount定义方法接受state里面的num保存数据
return state.num+1
}
},
mutations:{
add(state){ //页面改变state里面的num值
state.num = state.num + 1
},
reduction(state){ //页面改变state里面的num值
state.num = state.num - 1
}
}
})
在页面改变num数据
<template>
<div class="hello">
<h1>{{this.$store.state.num}}<h1> //动态加减的值
<button type="button" name="button" @click="addFun">+</button>
<button type="button" name="button" @click="reductionFun">-</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
},
mounted () {
console.log(this.$store.state.num)
},
methods: {
addFun () {
this.$store.commit("add")
},
reductionFun () {
this.$store.commit("reduction")
}
}
}
</script>
Actions
当点击后页面上的值是改变了;我们达到了修改store中状态值的目的,但是,官方并不介意我们这样直接去修改store里面的值,而是让我们去提交一个actions,在actions中提交mutation再去修改状态值,接下来我们修改index.js文件,先定义actions提交mutation的函数
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({ //导出vuex这个对象
state:{
num: 1
},
getters:{
getAddCount(state){ //getAddCount定义方法接受state里面的num保存数据
return state.num+1
}
},
mutations:{
add(state){ //页面改变state里面的num值
state.num = state.num + 1
},
reduction(state){ //页面改变state里面的num值
state.num = state.num - 1
}
},
actions:{
addFun(contnum){
contnum.commit("add")
},
reductionFun(contnum){
contnum.commit("reduction")
}
}
})
在页面改变num值
<template>
<div class="hello">
<h1>{{this.$store.state.num}}<h1> //动态加减的值
<button type="button" name="button" @click="addFun">+</button>
<button type="button" name="button" @click="reductionFun">-</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
num: this.$store.state.num
}
},
mounted () {
console.log(this.$store.state.num)
},
methods: {
addFun () {
// this.$store.commit("add")
this.$store.dispatch("addFun")
},
reductionFun () {
// this.$store.commit("reduction")
this.$store.dispatch("reductionFun")
}
}
}
</script>
mapState、mapGetters、mapActions
如果我们不喜欢这种在页面上使用"this. s t r o e . s t a t e . n u m " 和 " t h i s . stroe.state.num"和"this. stroe.state.num"和"this.store.dispatch(‘addFun’)"这种很长的写法,那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了;
修该页面
<template>
<div class="hello">
<h1>{{this.$store.state.num}}<h1> //动态加减的值
<button type="button" name="button" @click="addFun">+</button>
<button type="button" name="button" @click="reductionFun">-</button>
//简化后
<h1>{{statenum}}</h1> //state里面的值
<h1>{{getAddCount}}</h1> //getters里面的值
<button type="button" name="button" @click="addFun">+</button> //累加
<button type="button" name="button" @click="reductionFun">-</button> //累减
</div>
</template>
import {mapState,mapGetters,mapActions} from 'vuex'
export default {
name: 'HelloWorld',
data () {
return {
num: this.$store.state.num
}
},
methods: {
// addFun () {
// // this.$store.commit("add")
// this.$store.dispatch("addFun")
// },
// reductionFun () {
// // this.$store.commit("reduction")
// this.$store.dispatch("reductionFun")
// }
...mapActions([
'addFun',
'reductionFun'
])
},
computed:{
...mapState({
statenum:state => state.num
}),
...mapGetters([
'getAddCount'
])
}
}