image.png
- 在vue中我们通过vuex来管理状态，该值一但被修改，所有引用该值的地方都会自动更新
项目的src文件下的store文件中新建一个index.js文件如下：
import Vue from ' vue'
import Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const store=new vuex.Store({
})
export default store
- 然后我们在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象；
import Vue from 'vue'
import store from '/store'
new vue({
store
})
State
- vuex的数据源，在页面获取需要使用this.$store.state来获取state数据
import Vue from ' vue'
import Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const store=new vuex.Store({
state:{
count:1
}
})
export default store
- 在页面就可以使用this.$store.state.count来获取数据
还可以这样写
<script>
import { mapState, mapMutations} from 'vuex'
export default{
computed:{
// ...mapState(['count'])
// ...mapState({
// total:'total'
// })
// 推荐使用这种
...mapState({
count:(state)=>state.count
})
}
}
<script>
Getters
- Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果.
import Vue from ' vue'
import Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const store=new vuex.Store({
state:{
count:1
},
getters:{
getStateCount:function(state){
return state.count+1
}
}
})
export default store
- 在页面获取使用this.$store.getters.getStateCount
使用辅助函数后 在行间就可以使用这个key值 getStateCount，来读取了
import { mapGetters} from 'vuex'
export default{
computed:{
// 取值一定要在computed中，getter和state都要在计算属性中
// ...mapGetters(['getStateCount'])
..mapGetters({
getStateCount:'getStateCount'
})
}
}
Mutations
- 如果想更改state的值如何修改，使用mutations
import Vue from ' vue'
import Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const store=new vuex.Store({
state:{
count:1
},
getters:{
getStateCount:function(state){
return state.count+1
}
},
mutations: {
AddCount(state) {
return (state.count +=1)
},
ReduceCount(state) {
return (state.count -= 1)
}
}
})
export default {
store,
mutations,
getters
}
- 那在界面如何调用mutations呢？
<template>
<div class="hello">
<h3>{{$store.state.count}}</h3>
<div>
<button @click="AddClick(10)">增加</button>
<button @click="ReduceClick(10)">减少</button>
</div>
</div>
</template>
<script>
import { mapState, mapMutations} from 'vuex'
export default{
methods: {
...mapMutations({
'AddCount':'AddCount',
'ReduceCount':'ReduceCount'
})
handleAddClick(n){
// 第一种方式
// this.$store.commit('AddCount');
// 第二种方式
this.AddCount()
},
handleReduceClick(n){
// this.$store.commit('ReduceCount');
this.ReduceCount()
}
}
}
<script>
Actions
- 通过mutations达到了修改store中状态值的目的，但是，官方并不推荐我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值
import Vue from ' vue'
import Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const store=new vuex.Store({
state:{
count:1
},
getters:{
getStateCount:function(state){
return state.count+1
}
},
mutations: {
AddCount(state,n) {
return (state.count +=n)
},
ReduceCount(state,n) {
return (state.count -= n)
},
actions :{
AddCount100(context, n ) {
context.commit('AddCount', n)
},
ReduceCount100(context, n {
context.commit('ReduceCount', n)
}
}
}
})
export default {
getters,
state,
mutations,
actions
}
- 所以点击触发方法可以改为：
<template>
<div class="hello">
<h3>{{$store.state.count}}</h3>
<div>
<button @click="AddClick(10)">增加</button>
<button @click="ReduceClick(10)">减少</button>
</div>
</div>
</template>
<script>
import { mapState, mapMutations ，mapActions} from 'vuex'
export default{
methods: {
// ...mapActions(['AddCount100','ReduceCount100'])
...mapActions({
'AddCount100':'AddCount100',
'ReduceCount100':'ReduceCount100'
})
...mapActions({
})
handleAddClick(n){
var n=10;
// this.$store.dispatch('AddCount100',n)
this.AddCount100(n)
},
handleReduceClick(n){
var n=10;
// this.$store.dispatch('ReduceCount100',n)
this.ReduceCount100(n)
}
}
}
<script>
