学习视频链接为https://www.bilibili.com/video/BV1h7411N7bg?p=1
1、State
写法一
reduce.vue文件
<template>
<div>
<h3>当前最新的count值{{count}}</h3>
</div>
</template>
文件 store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
}
})
写法二(将全局属性映射为当前组件的计算属性)
文件reduce.js
<template>
<div>
<h3>当前最新的count值{{count}}</h3>
</div>
</template>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['count'])
},
}
2、Mutation
不可以直接修改state里面的值,要通过mutation修改state的值,便于集中监控state数据
store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add (state, num) {
state.count += num
},
reduce (state, num) {
state.count -= num
}
}
})
写法一
reduce.vue文件
<template>
<div>
<h3>当前最新的count值{{$store.state.count}}</h3>
<button @click="handelAdd">+</button>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {
handelAdd () {
this.$store.commit('add', 3)
}
}
}
</script>
写法二
<template>
<div>
<h3>当前最新的count值{{count}}</h3>
<button @click="reduce(1)">-</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
...mapMutations(['reduce', 1])
}
}
</script>
3、Actions
处理异步任务;如果通过异步操作数据必须通过Action,不能直接使用Mutation,但是需要在Action中通过触发Mutation的方式间接变更数据
写法一
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add (state, num) {
state.count += num
}
},
actions: {
addAsync (context) {
setTimeout(() => {
context.commit('add', 1)
}, 1000)
}
}
})
addtion.vue
<template>
<div>
<h3>当前最新的count值{{$store.state.count}}</h3>
<button @click="handelAdd">+</button>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
handelAdd () {
this.$store.dispatch('addAsync', 3)
}
}
}
</script>
执行顺序
注: context可以理解为vuex.Store 的实例对象
写法二:
store.js不变
reduce.vue
<template>
<div>
<h3>当前最新的count值{{count}}</h3>
<button @click="handleAdd">-</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
data () {
return {
}
},
computed: {
...mapState(['count'])
},
methods: {
...mapActions(['addAsync'], 1),
handleAdd () {
this.addAsync()
}
}
}
</script>
执行顺序
Getter
Getter用于对Store中的数据进行加工处理形成新的数据(类似Vue的计算属性)
Store中数据发生变化,Getter的数据也会跟着变化
写法一
reduce.vue
<template>
<div>
<h3>当前最新的count值{{count}}</h3>
<h3>{{$store.getters.showNewNum}}</h3>
<button @click="handleAdd">-</button>
</div>
</template>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
getters: {
showNewNum (state) {
return '当前最新数据为' + state.count + '呀'
}
}
})
写法二
reduce.vue
<template>
<div>
{{showNewNum}}
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data () {
return {
}
},
computed: {
...mapGetters(['showNewNum'])
}
}
</script>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
getters: {
showNewNum (state) {
return '当前最新数据为' + state.count + '呀'
}
}
})