主要讲解store实例中常用配置选项的作用，包括store实例中的state初始数据的基本概念、如何通过commit()方法提交mutations选项中定义的函数来改变初始数据状态、actions选项与mutations配置项的区别、plugins选项的作用、如何使用getters选项定义计算属性获取最终值等。
1.actions
actions选项用来定义事件处理方法，用于处理state数据。
actions类似于mutation，不同之处在于actions是异步执行的，事件处理函数可以接受{commit}对象，完成mutation提交，从而方便devtools调试工具跟踪状态的state变化。
在使用时，需要在store仓库中注册actions选项，在里面定义事件处理方法。
事件处理方法接受context作为第一个参数，payload作为第2个参数(根据需要进行选择)。
<template>
<div id="app">
<button @click="mut">查看mutations接收的参数</button>
<button @click="act">查看actions接收的参数</button>
</div>
</template>
<script >
var store = new Vuex.store({
state: { name: '张三', age: 38, gender: '男' },
mutations: { test(state) { console.log(state) } },
actions: { test(context) { console.log(context) } }
})
var vm = new Vue({
el: '#app',
store, methods: {
mut() { this.$store.commit('test') },
atc() { this.$store.dispatch('fuck') }
}
})
</script>2.mutations
mutations选项中的事件处理方法接受state对象作为参数，即初始数据，使用时只需要在store实例配置对象中定义state即可。
mutations中的方法用来进行state数据操作，在组件中完成mutations提交就可以完成组件状态更新。
虽然使用mutations操作数据稍微烦琐一些，但是可以集中监控所有数据的变化
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
getters: {
},
mutations: {
add(state) {
state.count++
},
addN(state, step) {
state.count += step
}
},
actions: {
},
modules: {
}
})App.vue
<template>
<div>
fuckWorld
<button @click="Bcount">按钮</button>
{{ this.$store.state.count }}
</div>
</template>
<script>
export default {
data: {
return: {}
},
methods: {
Bcount() {
this.$store.commit('addN', 10)
}
}
}
</script>
<style scoped></style>
3.getters
store实例允许在store中定义getters计算属性，类似于Vue实例的computed。
getters返回值会根据它的依赖进行处理然后缓存起来，且只有当它的依赖值发生改变时才会被重新计算。
getters用于对Store中的数据进行加工处理形成新的数据，类似于Vue中的计算属性。
Store中数据变化，Getter的数据也会跟着变化。
getters使用方法
3.1.this.$store.getters.name
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
getters: {
shownum(state) {
return '当前最新的数量是[' + state.count + ']'
}
},
mutations: {
add(state) {
state.count++
},
addN(state, step) {
state.count += step
}
},
actions: {
},
modules: {
}
})
app.vue
<template>
<div>
<!-- fuckWorld
<button @click="Bcount">按钮</button>
{{ this.$store.state.count }} -->
{{ this.$store.getters.shownum }}
</div>
</template>
<script>
export default {
data: {
return: {}
},
methods: {
Bcount() {
this.$store.commit('addN', 10)
}
}
}
</script>
<style scoped></style>3.2.import {mapGetters} from ‘vuex’
. . . mapGetters([‘shownum’]) * . . . 展开运算符
app.vue
<template>
<div>
<!-- fuckWorld
<button @click="Bcount">按钮</button>
{{ this.$store.state.count }} -->
{{ shownum }}
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data: {
return: {}
},
methods: {
Bcount() {
this.$store.commit('addN', 10)
}
},
computed: {
...mapGetters(['shownum'])
}
}
</script>
<style scoped></style>4.modules
modules用来在store实例中定义模块对象。
在项目开发中，页面组件存在多种状态，且是通过单一状态树实现数据状态可跟踪的，Vue为了解决当前这种复杂应用状态，提出了类似于模块化开发的方式对store对象仓库进行标准化管理。
modules是store实例对象的选项。
<template>
<div id="app"></div>
</template>
<script >
const moduleA = {
state: { nameA: 'A' }
}
const moduleB = {
state: { nameB: 'B' }
}
</script>
<style scoped></style>
Vue.use(Vuex)
export default new Vuex.Store({
module: {
a: moduleA,
b: moduleB
}