Vue学习笔记:Vuex

为什么需要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