Jackyfei

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

 

+

(^_^)打个赏喝个咖啡(^_^)

微信支付
posted @   张飞洪[厦门]  阅读(327)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
点击右上角即可分享
微信分享提示