为什么需要Vuex

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

底层设计模式:

全局单例模式

应用场景

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

Vuex运行机制

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

Vue学习笔记:Vuex-LMLPHP

如何在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底层原理及核心概念

Vue学习笔记:Vuex-LMLPHP

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
05-22 02:26