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