《Vue.js项目实战》
Vuex
集中式的状态管理
- Vuex从Flux（由Facebook开发）的概念中获取得灵感。Flux又一系列指导原则构成，阐明了如何使用集中式store来实现组件之间的单向数据流。
- Vuex的核心元素是store，是进行数据存储和数据处理的主要架构。
store包含如下信息：
state // 存储应用状态的响应式数据对象
getter // 等价于store的计算属性
mutation // 用来改变应用状态的函数
action // 通常用来调用异步API的函数，然后使用mutation改变数据
Vuex store
1.安装vuex
npm i -S vuex
然后新建store文件夹，并创建index.js来安装Vuex插件：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
2.使用Vuex.Store构造函数创建store:
const store = new Vuex.Store({
// TODO 选项
})
3.导出store：
export default store
4.在main.js文件中，导入store:
import store from './store'
5.为了让store在应用中生效，我们还需要像注入路由器一样注入它：
const app = new Vue({
router,
store,
el: '#app',
...App,
})
state是唯一数据源
state是store的主要组成部分，它展示了应用中组件的所有共享数据。
- state是共享数据的唯一数据源
- state是只读的
（1）在store选项中添加state函数，该函数返回一个对象：
const store = new Vuex.Store({
state () {
return {
user: null
}
},
})
（2）在组件中读取状态：
this.$store.state.user
使用mutation修改状态
- mutation是修改state的唯一方式
- mutation接受state作为第一个参数，同时接受一个可选的载荷（payload）参数，以此来更新state
- 不应该在mutation中使用异步操作
- 严格模式：避免在mutation中使用异步函数
strict: true - 不要在生产环境下启用严格模式，以免影响性能
strict: process.env.NODE_ENV !== 'production'
（1）添加一个mutation：
const store = new Vuex.Store({
state () { /* ... */ },
mutations: {
user: (state, user) => {
state.user = user
}
}
})
（2）表明调用mutation的用词是submit，在组件中：
this.$store.commit('user', userData)
使用getter计算和返回数据
（1）创建一个getter：
const store = new Vuex.Store({
// ...
getter: {
user: state => state.user,
}
})
（2）在组件中，可以用这个getter代替之前直接获取状态的方法：
this.$store.getter.user // this.$store.state.user
使用action操作store
- action不仅可以提交mutation，还能做异步操作
- action的声明由一个类型和一个处理函数构成
store.dispath('action-type', payloadObject) - action的处理函数接收两个参数：
1.context
2.payload
（1）创建action:
actions: {
login ({ commit }) {
const userData = {
profile: {
displayName: 'Mr Cat',
},
}
commit('user', userData)
},
// ...
},
（2）在组件中使用：
this.$store.dispatch('login')
辅助函数
Vuex提供了一系列辅助函数供添加state、getter、mutation以及action。出于将组建中的状态和逻辑分离的考虑，我们只应该在组件中使用getter和action，所以只会用到mapGetters和mapActions。
辅助函数的参数可以是：
1.类型的数组，其中的每一个元素对应于组件中的同名数据
2.对象，其中的键是组件中数据的别名，值则是类型
数组语法例如：
mapGetters(['a', 'b'])
// 等价于
{
a () { return this.$store.getters.a },
b () { return this.$store.getters.b },
}
对象语法例如：
mapGetters({ x: 'a', y: 'b' })
// 等价于
{
x () { return this.$store.getters.a },
y () { return this.$store.getters.b },
}
（1）在组件中导入：
import { mapGetters, mapActions } from 'vuex'
（2）然后将组件修改为：
export default {
computed: {
...mapGetters([
'user',
'userPicture',
]),
},
methods: {
...mapActions({
centerOnUser: 'login',
logout: 'logout'
}),
},
}
Vuex模块
创建两个模块：
- maps
- posts
（1）在store文件夹中新建一个maps.js文件。它导出一个默认模块定义，其中包括地图的state：
export default {
namespaced: true,
state () {
return {
center: {
lat: 48.8538302,
lng: 2.2982161,
}
}
}
}
（2）将模块添加到store中，在store/index.js文件中添加modules选项：
import maps from './maps'
const store = new Vuex.Store({
// ...
modules: {
maps,
}
})
默认情况下，模块中getter、mutation、action的状态也会成为这个模块的状态。这里它是store.state.maps。
带命名空间的模块
上面的namespaced选项告诉Vuex在该模块的所有getter、mutation、action前添加maps/命名空间，还会在这个模块内的commit和dispatch调用中添加它们。
// getter模块
getters: {
center: state => state.center,
}
maps/center getter 会被添加到store中。使用时可以这么写：
1.getters
this.$store.getters['maps/center']
2.使用getter辅助函数：
mapGetters({
center: 'maps/center',
})
3.可以指定命名空间：
mapGetters('maps', [
'center'
])
4.使用createNamespacedHelpers方法生成基于某个命名空间的辅助函数：
import { createNamespacedHelpers } from vuex
import { mapGetters } = createNamespacedHelpers('maps')
export default {
computed: mapGetters([
'center',
])
}
访问全局元素
1.在getter中
你可以在命名空间模块的getter中访问到根状态和根getter（即所有的getter）：
someGetter: (state, getters, rootState, rootGetters) => { /* ... */}
2.在action中
你可以访问到上下文的rootGetters，还可以在commit和dispatch调用中使用{ root: true }选项：
myAction({ dispatch, commit, getters, rootGetters }) {
getters.a // store.getters['maps/a']
rootGetters.a // store.getters['a']
commit('someMutation') // 'maps/someMutation'
commit('someMutation', null, { root: true }) // 'someMutation'
dispatch('someAction') // 'maps/someAction'
dispatch('someAction', null, { root: true }) // 'someAction'
}