1 # 一、理解vuex
2 1.概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读写),也是一种组件间通信的方式,且适用于任意组件间通信。
3 2.Github地址:https://github.com/vuejs/vuex
4 # 二、什么时候使用Vuex
5 1.多个组件依赖同一状态
6 2.来自不同组件的行为需要变更同一状态
7 # 三、安装: npm i vuex@3
8 vuex@3 对应的 vue2
9 vuex@4 对应的 vue3
10 # 四、搭建vuex环境
11 // 该文件用于创建Vuex中最为核心的store,路劲(一般都放这里):src/store/index.js
12 // 引入Vuex
13 import Vue from 'vue'
14 import Vuex from 'vuex'
15
16 // 引入插件
17 Vue.use(Vuex);
18
19 // 准备actions,用于响应组件中的动作
20 const actions = {
21 jia(miniStore, value){
22 miniStore.commit('JIA', value)
23 },
24 jian(miniStore, value){
25 miniStore.commit('JIAN', value)
26 },
27 jiaOdd(miniStore, value){
28 if (miniStore.state.sum % 2){
29 miniStore.commit('JIA', value)
30 }
31 },
32 jiaWait(miniStore, value){
33 setTimeout(()=>{
34 miniStore.commit('JIA', value)
35 }, 500);
36 }
37 }
38 // 准备mutation,用于操作数据(state)
39 const mutations = {
40 JIA(context, value) {
41 context.sum += value;
42 },
43 JIAN(context, value) {
44 context.sum -= value;
45 },
46 }
47 // 准备state,用于存储数据
48 const state = {
49 sum: 0,
50 }
51
52
53 // 创建并暴露store
54 export default new Vuex.Store({
55 actions,
56 mutations,
57 state
58 });
59 # 组件部分代码
60 <template>
61 <div>
62 <h1>当前求和为:{{sum}}</h1>
63 <h1>将当前求和的值放大10倍:{{bigSum}}</h1>
64 <select v-model.number="n">
65 <option value="1">1</option>
66 <option value="2">2</option>
67 <option value="3">3</option>
68 </select>
69 <button @click="invrement">+</button>
70 <button @click="decrement">-</button>
71 <button @click="invrementOdd">当前求和为奇数再加</button>
72 <button @click="invrementWait">等一等再加</button>
73 </div>
74 </template>
75 <script>
76 import {mapState, mapGetters} from 'vuex'
77 export default {
78 name: 'Count',
79 data(){
80 return {
81 n: 1
82 }
83 },
84 computed:{
85 // sum(){
86 // return this.$store.state.sum;
87 // },
88 // bigSum(){
89 // return this.$store.getters.bigSum;
90 // },
91 // 借助mapState生成从state中来的计算数据
92 // ...mapState({sum: 'sum'}), // 代替上面的sum()
93 ...mapState(['sum']), // 数组写法
94 // 借助mapState生成从getters中来的计算数据
95 // ...mapGetters({bigSum: 'bigSum'}), // 代替上面的bigSum()
96 ...mapGetters(['bigSum']), // 数组写法
97 },
98 methods:{
99 invrement(){
100 // console.log('@', this);
101 this.$store.commit('JIA', this.n);
102 },
103 decrement(){
104 this.$store.commit('JIAN', this.n);
105 },
106 invrementOdd(){
107 this.$store.dispatch('jiaOdd', this.n);
108 },
109 invrementWait(){
110 this.$store.dispatch('jiaWait', this.n);
111 }
112 },
113 mounted(){
114
115 }
116 }
117 </script>
118 <style scoped>
119 button {
120 margin-left: 5px;
121 }
122 </style>
123
124
125 # 1.组件中渡漆vuex中的数据:$store.state.sum
126 # 2.组件中修改vuex中的数据: $store.dispatch('actions中的方法名', data) 或 $store.commit('mutations中的方法名', data)
127 # 备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,不写dispatch,直接写commit

Vue 状态管理之vuex && {mapState,mapGetters}的更多相关文章

  1. Vue状态管理之Vuex

    Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 ...

  2. vue - 状态管理器 Vuex

    状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.

  3. 五、vue状态管理模式vuex

    一.vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 即data中属性同时有一 ...

  4. Vue状态管理模式---Vuex

    1. Vuex是做什么的? 官方解释: Vuex 是一个专为Vue.js 应用程序开发的 状态管理模式 它采用 集中式存储管理 应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化 ...

  5. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  6. vuex(vue状态管理)

    vuex(vue状态管理) 1.先安装vuex npm install vuex --save   2.在项目的src目录下创建store目录,并且新建index.js文件,然后创建vuex实例,引入 ...

  7. vue状态管理器(用户登录简单应用)

    技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一  vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...

  8. 理解Vue的状态管理模式Vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理,一听就很高大 ...

  9. VueX(vue状态管理)简单小实例

    VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...

随机推荐

  1. vue项目引入TinyMCE

    1.安装 npm install @tinymce/tinymce-vue@3.0.1 -S 2.配置 <template> <!-- 富文本 --> <div> ...

  2. 696. Count Binary Substrings - LeetCode

    Question 696. Count Binary Substrings Example1 Input: "00110011" Output: 6 Explanation: Th ...

  3. MongoDB 常用启动参数

    每日一句 Once you choose your way of life, be brave to stick it out and never return. 生活的道路一旦选定,就要勇敢地走到底 ...

  4. mmdetection源码阅读

    2021-11-23号更新 mmdetection中的hook函数 参考: 重难点总结: # step1: 根据官方文档,getattr(self,'name')等同于self.name # sept ...

  5. 【Unity Shader学习笔记】Unity基础纹理-法线贴图

    1 高度纹理 使用一张纹理改变物体表面法线,为模型提供更多细节. 有两种主要方法: 1.高度映射:使用一张高度纹理(height map)来模拟表面位移(displacement).得到一个修改后的法 ...

  6. [gym102978C] Count Min Ratio

    [gym102978C] Count Min Ratio 给定 \(B\) 个蓝色的球. \(R\) 个红色的球以及一个绿色的球,同颜色的球不可区分.对于一种球的排列方式,记 \(l_B,r_B,l_ ...

  7. 编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?

    注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题. 这种异常,对于程序没有任何影响的. 为什么会出现这种现象: 由于vue ...

  8. Docker容器手动安装oracle19C

    Docker容器手动安装oracle19C docker容器体积小,与宿主机共用内核参数,因此修改宿主机的内核参数即是修改容器的内核参数 1.修改宿主机内核参数 [root@localhost ~]# ...

  9. JavaScript 防盗链的原理以及破解方法

    先说说防盗链的原理,http 协议中,如果从一个网页跳到另一个网页,http 头字段里面会带个 Referer.这里的Referer是由于历史原因导致了拼写错误 后来也就一直沿用.图片服务器通过检测 ...

  10. ms10_002 IE浏览器漏洞

    一.环境说明 kali linux 靶机:xp 二.ms10_002漏洞利用 msf5 exploit(windows/smb/ms08_067_netapi) > search ms10_00 ...