Vue2.5学习笔记（九）使用Vuex
1.什么是Vuex?
官方定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex和全局变量的区别
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
#最简单的 Store
2.基本概念
store仓库
创建仓库：
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
city:'西安'
}
})
state状态
在 Vue 组件中获得 Vuex 状态：在计算属性中返回。
// 创建一个 Counter 组件
const Counter = {
template: `{{ count }}`,
computed: {
count () {
return store.state.count
}
}
}
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）。通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。
commit提交mutation变更
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。它会接受 state 作为第一个参数。
mutations:{
changeCity(state,city){
state.city = city;
}
}
commit mutation
store.commit('changCity',"Xi'an")
actions
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
定义actions:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
city:'西安'
},
actions:{
changeCity(context,city){
context.commit('changeCity',city);
}
},
mutations:{
changeCity(state,city){
state.city = city;
}
}
})
dispatch actions
this.$store.dispatch('changeCity',city);
流程
dispatch——action内commit相应的mutation——mutation做出相应的操作（mutation不自己commit，而是由action来commit）
在不进行异步操作或大量数据处理时，可以直接使用store.commit(mutation,payload)方法进行commit mutation
3.Vuex结合localStorage
在之前的store中，city被写死了，导致每次刷新页面city就会恢复默认值。
export default new Vuex.Store({
state:{
city:'西安'
}
})
我们可以借助HTML5提供的本地存储API localStorage来进行优化：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let defaultCity = '西安'
try{
if(localStorage.city){
defaultCity = localStorage.city;
}
}catch (e){
console.log(e);
}
export default new Vuex.Store({
state:{
city:defaultCity
},
actions:{
changeCity(context,city){
context.commit('changeCity',city);
}
},
mutations:{
changeCity(state,city){
state.city = city;
localStorage.city = city;
}
}
})
4.Vuex模块化
像上面那样将vuex的内容全部写在一个文件内，文件会慢慢变得复杂且难以维护，为解决此问题，可以将src/state/index.js拆分为几个不同的模块：
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
actions,
mutations
})
state.js
let defaultCity = '西安'
try{
if(localStorage.city){
defaultCity = localStorage.city;
}
}catch (e){
console.log(e);
}
export default {
city : defaultCity
}
mutation.js
export default {
changeCity(state,city){
state.city = city;
try{
localStorage.city = city;
}catch(e){}
}
}
actions.js
export default{
changeCity(context,city){
context.commit('changeCity',city);
}
}