Vue 状态管理 Vuex
1、概述
Vuex作为插件,管理和维护整个项目的组件状态。
2、安装vuex
cnpm i --save vuex
3、vuex使用
github地址:https://github.com/MengFangui/Vuex
new Vue({
el: '#app',
router: router,
//使用vuex
store: store,
render: h => {
return h(App)
}
});
4、配置项
(1)数据:数据保存在state中。store的数据只能读取,不能改变。
(2)改变store中的数据使用mutations。组件内通过this.$store.commit来执行mutations.
(3)getters:提取过滤方法。
(4)actions:处理异步操作,组件内通过this.$store.dispatch触发。
涉及数据改变的用mutations,涉及业务逻辑的使用actions。
以上整体配置为:
//vuex的配置
//注意Store是大写
const store = new Vuex.Store({
//数据保存
state: {
count: 0,
list: [1, 5, 8, 10, 30, 50]
},
mutations: {
increase(state, n = 1) {
state.count = n;
},
decrease(state, n = 1) {
state.count -= n;
}
},
getters: {
filteredList: state => {
return state.list.filter(item => item < 10);
}
},
actions:{
asyncIncrease(context){
//异步 1s后执行
return new Promise(resolve=>{
setTimeout(()=>{
context.commit('increase');
//Promise 的一种状态Resolved(已完成)
resolve();
},1000)
})
}
}
});
5、组件代码
<template>
<div>
<h1>首页</h1>
{{count}}
<button @click="handleIncrease"> 5</button>
<button @click="handleDecrease">-5</button>
<!--getters 用法-->
<div>{{list}}</div>
<!--actions用法-->
<button @click="handleAsyncIncrease">action 1</button>
<!--router-link会渲染为一个a标签 实现跳转的方式1-->
<!--router-link 的tag属性 指定渲染成什么标签-->
<!--router-link 的replace属性 不会留下history记录,不能使用后退键-->
<!--router-link 的active-class属性 路由匹配成功时会自动给当前元素设置为一个名为router-link-active的class-->
<router-link to="/about">跳转到 about</router-link>
</div>
</template>
<script>
export default {
computed:{
count(){
return this.$store.state.count;
},
list(){
return this.$store.getters.filteredList;
}
},
methods:{
handleIncrease(){
this.$store.commit('increase',5);
},
handleDecrease(){
this.$store.commit('decrease',5);
},
handleAsyncIncrease(){
this.$store.dispatch('asyncIncrease').then(()=>{
console.log(this.$store.state.count)
});
}
}
}
</script>
vuex 维护多个组件之间的公共(共有)状态!
更多专业前端知识,请上 【猿2048】www.mk2048.com
Vue 状态管理 Vuex相关推荐
- Vue状态管理vuex
转: https://www.cnblogs.com/xiaohuochai/p/7554127.html 前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为 ...
- vue状态管理——Vuex
vuex官方解释 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单理解 vue ...
- Pinia下一代vue状态管理工具
建议大家结合上一篇文章学习:vite+vue script setup语法糖写法:style'me的个人博客 1.pinia是什么? Pinia是一个围绕Vue 3 Composition API的 ...
- [vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理 简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...
- 状态管理vuex的规范化使用~~总结
一.定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 二.安装 cnpm i vuex - ...
- Vue开发实例(14)之Vue状态管理store
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
- vue总结 08状态管理vuex
状态管理 类 Flux 状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库 ...
- VueX(Vue状态管理模式)
一.初识VueX 1.1 关于VueX VueX是适用于在Vue项目开发时使用的状态管理工具.试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护 ...
- vue状态管理存取数据_vue状态管理vuex从浅入深详细讲解
1.vuex简介以及创建一个简单的仓库 vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情 ...
最新文章
- 前端学习笔记系列一:14 vue3.X中alias的配置
- Android事件机制:事件传递和消费
- 免费和开源世界里面有很多好的邮件服务器
- MTK 驱动(67)---深入MTK平台bootloader启动之【 lk -amp;gt; kernel】分析笔记
- 用Node操作Firebird。
- rs232转usb_#每日一练2.19#一起学习USB转串口通信
- python项目实例-实例分享 | 4个Python实战项目(一)
- python图表制作方法_python图表制作
- 计算机病毒的防治方法不包括,计算机病毒的防治方法
- matlab 复权数据,〖Matlab〗基于通达信股价数据的复权处理(fantuanxiaot版本)
- C#开发微信门户及应用(34)--微信裂变红包
- 651被远程计算机关闭,win7宽带连接提示错误651调制解调器报告了一个错误怎么办...
- [更新ing]sklearn(十六):Nearest Neighbors *
- matlab位置跟踪仿真
- 渗透测试 ( 4 ) --- Meterpreter 命令详解
- MySQL数据库的引擎
- 大学生计算机编程总结,计算机编程实习小结
- 蓝桥杯 提高题 母牛的故事
- day15 计算圆周率
- 2008年9月28号,星期天,晴。博学之,审问之,慎思之,明辨之,笃行之。(《礼记》)
热门文章
- vscode python单步调试_调试期间VSCode python“未验证断点”?
- 完整机器学习项目的流程
- GPU下train 模型出现nan
- 51 nod 1522 上下序列——序列dp
- Mono for Android 篇二 使用Spinner 实现下拉列表读取Browser.BookmarksUri
- Application Verifier
- fixed 语句(C# 参考)
- “引用作为函数参数”与 “引用作为函数返回值”
- CentOS中通过NAT连接网络
- python ssl_Python3 ssl模块不可用的问题