为什么需要Vuex

• 管理共享状态
• 解决一份数据在多个组件中试用的困难
• 系统化的状态管理，区别于小型状态过来

底层设计模式：

全局单例模式

应用场景

• 适合中大型项目；
• 小项目反而会因为引入更多概念和框架而带来复杂性

Vuex运行机制

下图和state->vue->action流程差不多，只是多了个Mutations，用于Devtools监控调试。改图必须牢记。方能在后续编码中熟练运用。

如何在Vue中使用Vuex

准备工作

vue create vue_demo
cd vue_demo
npm i vuex
npm run serve

开头导入

import Vuex from 'vuex'
Vue.use(Vuex)

创建store实例

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
action:{
increment({commit}) {
setTimeout(()=>{
commit('increment')
}, 3000)
}
}
})

组件

<template>
<div id="app">
{{count}}
</div>
<button @click="$store.commit('increment')">click</button>
<button @click="$store.dispatch('increment')">click</button>
</template>

Script

export default{
name:"app",
conputed:{
count(){
return 0;
}
}
}

Vuex底层原理及核心概念

Vuex实践

 使用常量代替Mutation事件类型Vuex实践

//mutation-types.js
export const SOME_MUTATION = "SOME_MUTATION"

//store.js
import Vuex from 'vuex'
improt {SOME_MUTATION} from './mutation-types'

const store = new Vuex.Store({
state :{…}，
mutations:{
[SOME_MUTATION](state){
//mutate state
}
}
}

Module

• 开启名称空间 namespaced:true
• 嵌套模块不要过深，尽量扁平化
• 灵活应用 createNamespacedHelpers