Vuex 状态管理模式（使用）
一、Vuex简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
二、使用
1.安装依赖
- 情景1：在使用vueCli创建项目时勾选Vuex这个选项，项目会自动引入Vuex
- 情景2：在使用vue-cli创建项目时未勾选Vuex,此时需要安装Vuex，安装步骤如下：
首先，进入到创建项目的根目录下 使用 `npm install --save vuex`命令进行安装；如果网速较慢可使用cnpm install --save vuex
安装完成后项目目录如下：
|__ node_modules
|__ public
|__ src|_ assest|_ components|_Hello.vue|_ store|_index.js|_ view|_HomeView.vue|_AboutView.vue 2.使用
store中index.js中：
import { createStore } from 'vuex'export default createStore({state: {count:10,},
})
main.js文件Vuex挂载到vue实例中
import Vue from 'vue'
import App from './App'
import store from './store'Vue.config.productionTip = falsenew Vue({el: '#app',store, //创建的Vuex实例挂载到这个vue实例中render: h => h(App)
})
3.store 在组件中使用
在store文件夹下index.js中定义一个count
state:{count:10;
}在组件中读取count
- 方法一：直接读取显示在页面
<template><div><p>{{ this.$store.state.count }}</p></div>
</template>- 方法二：使用computed 计算属性读取
<template><div><p>{{ getCount }}</p></div>
</template><script>
export default{computed:{getCount(){return this.$store.state.count}}
}
</script>- 方法三： 使用mapState辅助函数
<template><div><p>{{ getCount }}</p></div>
</template><script>
import { mapState } from "vuex" //引入mapState
export default{computed:{...mapState(['count']),getCount(){return this.count}}
}
</script>4.Mutation
官网定义：更改Vuex的store中的状态的唯一方法是提交mutation
通俗的理解：mutation是用来改变store中状态值
使用如下：
- 情景一 ：不携带参数
在store文件夹下的index.js中定义mutation (以改变上面count的值为例)
mutations: {addCount(state){ //对count执行加1的操作state.count += 1;},delCount(state){state.count -= 1; //对count执行减1的操作}
}在组件中使用mutation
<template><div><p>{{ getCount }}</p><button @click="addHander">增加</button><button @click="delHander">减少</button></div>
</template><script>
export default{computed:{getCount(){return this.$store.state.count}},methods:{addHander(){this.$store.commit("addCount") },delHander(){this.$store.commit("delCount")}}
}
</script>- 情景二 携带参数
增加一个输入框，将用户输入的值作为count增加减少的对象
在store文件夹下的index.js中定义mutation (以改变上面count的值为例）
mutations: {addCount(state，num){ //对count执行加1的操作state.count += num;},delCount(state, num){state.count -= num; //对count执行减1的操作}
}在组件中使用
<template><div><p>{{ getCount }}</p><input type="text" v-model="num"><button @click="addHander">增加</button><button @click="delHander">减少</button></div>
</template><script>
export default{data(){return{num:""} },computed:{getCount(){return this.$store.state.count}},methods:{addHander(){this.$store.commit("addCount",parseInt(this.num)) },delHander(){this.$store.commit("delCount",Number(this.num))}}
}
</script>- 情景三：携带对象类型参数
在store文件夹下的index.js中定义mutation (以改变上面count的值为例）
mutations: {addCount(state，obj){ //对count执行加1的操作state.count += obj.num;},delCount(state, obj){state.count -= obj.num; //对count执行减1的操作}
}在组件中使用
<template><div><p>{{ getCount }}</p><input type="text" v-model="num"><button @click="addHander">增加</button><button @click="delHander">减少</button></div>
</template><script>
export default{data(){return{num:""} },computed:{getCount(){return this.$store.state.count}},methods:{addHander(){this.$store.commit("addCount",{num: parseInt(this.num)}) },delHander(){this.$store.commit("delCount",{num:Number(this.num)})}}
}
</script>- 情景4 使用mapMutations辅助函数
首先，在组件中引入mapMutations函数
<template><div><p>{{ getCount }}</p><input type="text" v-model="num"><button @click="addHander">增加</button><button @click="delHander">减少</button></div>
</template><script>
import { mapState, mapMutations } from "vuex" //引入mapState
export default{data(){return{num:""}},computed:{...mapState(['count']),getCount(){return this.count}},methods:{...mapMutations(["addCount","delCount"]),addHander(){this.addCount({num: parseInt(this.num)})},delCount(){this.delCount({num: Number(this.num)})}}
}
</script>5.Action
Action类似于Mutation但不同点在于：Action可以处理异步操作
state:{count:10,navInfo:[]
}action:{asyncUpdate(context){axios.get("网络请求接口").then(res=>{if(res.status === 200){context.commit("navInfo",res.data.banner)}else{context.commit("navInfo",[])}}).catch(err=>{console.log(err)})}
}在组件中使用
- 情景一：直接使用
<template>
<div> <ul><li v-for="(item,index) in banner" :key="index"><p>{{item.title}}</p></li></ul><button @click="getInfo">获取数据</button>
</div>
</template><script>export default{medthod:{getInfo(){this.$store.dispatch("asyncUpdate")}}}
</script>- 情景2：使用mapActions辅助函数
<template>
<div> <ul><li v-for="(item,index) in banner" :key="index"><p>{{item.title}}</p></li></ul><button @click="getInfo">获取数据</button>
</div>
</template><script>import { mapActions } from "vuex"export default{medthod:{...mapActions(['asyncUpdate'])getInfo(){this.asyncUpdate()}}}
</script>Vuex 状态管理模式（使用）相关推荐
- vuex状态管理模式：入门demo（状态管理仓）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- Vuex状态管理模式-M
Vuex Vuex 是一个专为 Vue.js 开发的状态管理模式.主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),页面多并且一层嵌套一层的传值,非常麻烦, ...
- 理解vuex -- vue的状态管理模式
2019独角兽企业重金招聘Python工程师标准>>> vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管 ...
- mount 返回状态_状态管理模式 — Vuex如何使用？
Extract 试想当我们在开发一个Vue应用程序时,如果在一个项目中频繁的使用组件传参的方式来同步data中的值,一旦项目结构变得复杂,管理和维护这些数据将变得十分繁琐,为此,Vue为这些被多个组件 ...
- 【Vue.js】全局状态管理模式插件vuex
文章目录 全局状态管理模式Vuex vuex是什么? 什么是"状态管理模式"? vuex的应用场景 Vuex安装 开始 核心概念 一.State 1.单一状态树 2.在 Vue 组 ...
- 状态管理模式 - vuex 的使用介绍
前言 大家好,不知道大家在用 vue 进行开发过程中有没有遇到这样一种场景,就是有些时候一些数据是一种通用的共享数据(比如登录信息),那么这类数据在各个组件模块中可能都会用到,如果每个组件中都去后台重 ...
- vue从入门到进阶：Vuex状态管理（十）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...
- vue2中vuex状态管理的理解（菜单面包板）
本片理解基于vue2对应的Vuex文档,结合了官网文档以及众多前辈大佬所发布的帖子,由衷表示感谢. vuex的超详细讲解和具体使用细节记录 随着我们进一步扩展约定,即组件不允许直接变更属于 store ...
- [vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理 简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...
最新文章
- 【青少年编程】【一级】森林的一天
- 几行代码完成动态图表绘制 | Python实战
- 空中悬停、翻滚转身、成功着陆，我用强化学习「回收」了SpaceX的火箭
- python自学到精通
- 屠榜大杀器UniMP！百度登顶图神经网络权威榜单三项榜首
- 论文浅尝 | 六篇2020年知识图谱预训练论文综述
- linux指令：输出重定向与追加- 输出重定向 - 表示追加
- 总结C++中取成员函数地址的几种方法
- 《深入Linux内核》 UNIX的一些故事
- python之类的封装、多态、继承
- java 控制路由器_停用角度路由器链路
- 声道测试音频_功率放大器测试方法
- jmeter录制脚本
- 【STM32】8.简单呼吸灯的制作教程，附代码、效果视频
- 微信小程序图标样式的引用
- c语言图形显示功能,C语言图形编程(二、图形显示).doc
- 深度学习 个人理解使用余弦相似度对人脸图片识别的过程
- 区块链游戏导航，一个不错的生意！
- ARM裸机--看门狗定时器
- 使用知用电流探头时如何设置示波器参数