Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
一、基本使用
1、起始
State
将应用全局状态定义在state中
state: {
isLogin: false
}
2、修改
Mutation
修改state只能通过mutation
mutations: {
login(state) {
state.isLogin = true
},
logout(state) {
state.isLogin = false
}
}
3、使用
获取状态 store.state
修改状态 store.commit(mutation)
<button @click="login" v-if="!$store.state.isLogin">登录</button>
<button @click="logout" v-else>登出</button>
//修改状态只能通过store.commit(mutation)
this.$store.commit('login')
this.$store.commit('logout')
Mutation 必须是同步函数！ Mutation 必须是同步函数！ Mutation 必须是同步函数！
4、为什么同步？
因为：mutation直接操作全局的状态管理state 。 如果存在异步，则在回调函数中进行的状态的改变都是不可追踪的，（如果并发，你无法判断是哪个先回调，什么时候回调），导致程序很不靠谱，很难调试！
二、Action
1、action
Action 类似于 mutation，不同在于:
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
Action 通过 store.dispatch 方法触发：
2、解决问题：
1、action异步操作结束后，可以处理多个 mutation；
2、action中可以触发另外一个action；
3、action可以返回Promise；
3、组合 Action
Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？
首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
现在你可以：
store.dispatch('actionA').then(() => {
// ...
})
在另外一个 action 中也可以：
actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
最后，如果我们利用 async / await，我们可以如下组合 action：
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。
4、API
dispatch
dispatch(type: string, payload?: any, options?: Object): Promise<any>dispatch(action: Object, options?: Object): Promise<any>
分发 action。options 里可以有 root: true，它允许在命名空间模块里分发根的 action。
返回一个解析所有被触发的 action 处理器的 Promise。
（todo待验证：一个action中有其他action:等待所有完成）
三、模块
1、store-模块化
2、命名空间
// 定义：user.js
export default {
namespaced: true, // 避免命名冲突
state:{...},
}
// 使用
<button @click="login" v-if="!$store.state.user.isLogin">登录</button>
this.$store.dispatch('user/login', 'admin')
.then(() => {
const redirect = this.$route.query.redirect || '/';
this.$router.push(redirect)
}).catch(() => {
alert('用户名或密码错误')
})
// router/index.js
store.state.user.isLogin
四、映射使用
mapState()/mapMutation()/mapAction()/mapGetters
通过这些映射方法
1、可以让大家少敲几个字，
2、避免对$store直接访问。
1、高级玩法-mapState:
import { mapState } from 'vuex'
computed: {
...mapState('user', ['isLogin']),
...mapGetters('user',['welcome']
}
<button @click="login" v-if="!isLogin">登录</button>
2、高级玩法-mapActions:
import { mapActions } from 'vuex'
methods: {
login() {
this['user/login']('admin').then(...)
},
...mapActions(['user/login', 'user/logout'])
},
五、getter
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性） 。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
1：计算属性（多影响一）
2、为什么出现？？？
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
所以放在store中用一个getter ，统一做（状态计算、拼接）处理！
六、插件
1、为什么要用vuex的插件。
当你做一些派生操作，跟我们的状态管理没有直接关联，的额外逻辑。不应该写到状态管理里面（丑陋；业务逻辑没有抽取出去，方便其他模块复用）。
典型场景：持久化登录（操作调用接口、操作localStorage、等）;
2、介绍-使用
Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数:
2.1编写-插件：
2个调用触发时机：
const myPlugin = store => {
// 时机1：当 store 初始化后调用
store.subscribe((mutation, state) => {
// 时机2：每次 mutation 之后调用
// mutation 的格式为 { type, payload }
})
}
2.2注册-使用：
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
3、场景实例
实现登录状态持久化，store/plugins/persist.js 2个调用触发时机：
export default store => {
// 时机1：初始化时从localStorage获取数据
const user = JSON.parse(localStorage.getItem('user'));
if (user) {
store.commit('user/login')
store.commit('user/setUsername', user.username) }
}
//时机2： 用户状态发生变化时缓存之
store.subscribe((mutation, state) => {
if (mutation.type.startsWith('user/')) {
localStorage.setItem('user', JSON.stringify(state.user));
} else if (mutation.type === 'user/logout') {
localStorage.removeItem('user');
}
})
}
