Vue学习笔记:Vuex
2024-10-19 15:24:21
为什么需要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
最新文章
- nginx源码分析之hash的实现
- AC日记——验证字串 openjudge 1.7 18
- 洛谷P2853 [USACO06DEC]牛的野餐Cow Picnic
- 2013-07-29 IT 要闻速记快想
- ie11只能用管理员身份打开解决办法
- 导入网页数据到 Google Sheet
- 【ASP.NET MVC 学习笔记】- 18 Bundle（捆绑）
- JumpServer1.0 服务搭建
- WPF 带清除按钮的文字框SearchTextBox
- java基础(二) -对象和类
- rpgmakermv(10) GraphicalDesignMode
- 编辑器：IDE（深坑不填）
- mybatis3.2初学感悟
- 原！上线遇到的问题， java序列化关键字transient 修饰的属性变成null了
- linux下使用crontab创建定时任务
- [C/C++11语法]_[0基础]_[lamba 表达式介绍]
- Linux安装cx_Oracle
- 【sed / awk脚本编写】
- Atitit. camel分词器 分词引擎 camel拆分 的实现设计
- java算法学习