Vue笔记_05_vuex

最新推荐文章于 2024-07-09 21:18:14 发布
最新推荐文章于 2024-07-09 21:18:14 发布
阅读量95 收藏
点赞数
分类专栏： Vue笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51896272/article/details/122641731
版权

Vue笔记_05_vuex

第五章 vuex

vuex是什么？

  1. 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式管理（读/写），也是组件间通信的方式，且适用于任意组件间通信
  2. Github地址：Vuex

什么时候用Vuex

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

搭建vuex环境

  1. vuex的工作原理图

在这里插入图片描述

  1. 安装vuex:npm install --save vuex

  2. 创建文件：src/store/index.js

    // 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex
Vue.use(Vuex)

// 准备actions对象--响应组件中用户的动作
const actions = {}
//  准备mutations对象--修改state中的数据
const mutations = {}
// 准备state对象--保存具体的数据
const state = {}


// 创建并暴露store
export default new Vuex.Store({
  actions, mutations, state
})

  3. 在main.js中创建vm时传入store配置项

    import Vue from 'vue'
import App from './App.vue'

// 引入store
import store from './store/index'

Vue.config.productionTip = false

// 创建vm的时候注册store
new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

  4. 组件中读取vuex中的数据：$store.state.sum

  5. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或者$store.commit('mutations中的方法名',数据)

案例

vue版本

在App.vue文件里：

<template>
  <div>
    <Count/>
  </div>
</template>

<script>
import Count from './components/Count.vue'

export default {
  name:'App',
  components:{Count}
}
</script>

<style>
  body {
    background-color: #e0e0e0;
  }
</style>

在Count.vue文件中：

<template>
  <div id="Count">
    <h1>当前求和为{{sum}}</h1>
    <!-- 用v-model绑定n的值，用number限定词来限定n的值为数字 -->
    <select v-model.number="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name:'Count',
  data() {
    return {
      n:1, // 用户选择的数字
      sum:0 // 当前的和
    }
  },
  methods: {
    // 加法
    increment() {
      this.sum += this.n
    },

    // 减法
    decrement() {
      this.sum -= this.n
    },

    // 当sum的值为奇数的时候才加，不然就不加
    incrementOdd() {
      if (this.sum % 2) {
        this.sum += this.n
      }
    },

    // 等一等再加
    incrementWait() {
      setTimeout(()=>{
        this.sum += this.n
      }, 500)
    }
  },
}
</script>

<style scoped>
  #Count {
    margin: 0 auto;
    width: 80%;
  }

  button {
    margin-left: 5px;
  }

  button:hover,
  select:hover {
    cursor: pointer;
  }
</style>

vuex版本

在main.js文件里：

import Vue from 'vue'
import App from './App.vue'

// 引入store
import store from './store/index'

Vue.config.productionTip = false

// 创建vm的时候注册store
new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

在src/store/index.js里：（重点）

// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex
Vue.use(Vuex)

// 准备actions对象--响应组件中用户的动作
const actions = {
  
  // 奇数的时候加
  incOdd(context, value) {
    if (context.state.sum % 2) {
      context.commit('INC', value)
    }
  },

  // 等一等再加
  incWait(context, value) {
    setTimeout(()=>{
      context.commit('INC', value)
    }, 500)
  }
}
//  准备mutations对象--修改state中的数据
const mutations = {
  // 加法的实现
  INC(state, value) {
    state.sum += value
  }, 

  // 减法的实现
  DEC(state, value) {
    state.sum -= value
  }
}
// 准备state对象--保存具体的数据
const state = {
  sum:0
}


// 创建并暴露store
export default new Vuex.Store({
  actions, mutations, state
})

在App.vue文件里：

<template>
  <div>
    <Count/>
  </div>
</template>

<script>
import Count from './components/Count.vue'

export default {
  name:'App',
  components:{Count}
}
</script>

<style>
  body {
    background-color: #e0e0e0;
  }
</style>

在Count.vue文件里：

<template>
  <div id="Count">
    <h1>当前求和为{{$store.state.sum}}</h1>
    <!-- 用v-model绑定n的值，用number限定词来限定n的值为数字 -->
    <select v-model.number="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name:'Count',
  data() {
    return {
      n:1, // 用户选择的数字
    }
  },
  methods: {
    // 加法
    increment() {
      // 这里不走Actions，而是直接走Mutetions
      this.$store.commit('INC', this.n)
    },

    // 减法
    decrement() {
      // 这里不走Actions，而是直接走Mutetions
      this.$store.commit('DEC', this.n)
    },

    // 当sum的值为奇数的时候才加，不然就不加
    incrementOdd() {
      this.$store.dispatch('incOdd', this.n)
    },

    // 等一等再加
    incrementWait() {
      this.$store.dispatch('incWait', this.n)
    }
  },
}
</script>

<style scoped>
  #Count {
    margin: 0 auto;
    width: 80%;
  }

  button {
    margin-left: 5px;
  }

  button:hover,
  select:hover {
    cursor: pointer;
  }
</style>

getter的使用

  1. 概念：当state中的数据是需要加工后再使用的时候，可以使用getter加工

  2. 在store.js中追加getter配置

    ...
const getter = {
    bigSum(state) {
        return state.sum * 10
    }
}

// 创建并暴露store
export default new Vuex.Store({
    ...
    getters
})

  3. 组件中读取数据：$store.getters.bigSum

四个map的使用

mapState方法

用于帮助我们映射state中的数据为计算属性

computed: {
	// 借助mapState方法生成计算属性：sum, school, subject（对象写法）
    ...mapState({sum:'sum', school:'school', subject:'subject'})
    
    // 借助mapState方法生成计算属性：sum, school, subject（数组写法）
    ...mapState(['sum', 'school', 'subject'])
}

mapGetters方法

用于帮助我们映射getter中的数据为计算属性

computed: {
    // 借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'})
    
    // 借助mapGetters生成基色属性：bigSum（数组写法）、
    ...mapGetters(['bigSum'])
}

mapActions方法

用于帮助我们生成actions对话的方法，即包含$store.dispatch(xx)的函数

methods: {
    // 靠mapActions方法生成：increment, decrement, incrementWait（对象形式）
    ...mapActions({increment:'increment', decrement:'decrement', incrementWait:'incrementWait'})
    
    // 靠mapActions方法生成：increment, decrement, incrementWait（数组形式）
    ...mapActions(['increment', 'decrement', 'incrementWait'])
}

mapMutations方法

用于帮助我们生成与mutations对话的方法， 即包含$store.commit(xxx)的函数

methods: {
    // 靠mapMutations生成：increment, decrement（对象形式）
    ...mapMutations({increment:'JIA', decrement:'JIAN'})
    
    // 靠mapMutations生成：increment, decrement（数组形式）
    ...mapMutations(['JIA', 'JIAN'])
}

备注：mapActions和mapMutations方法在使用的时候，若需要传递参数，需要：在模板中绑定事件时传递好参数，否则参数是事件对象

模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确

  2. 修改store.js

    const countAbout = {
    namespace: true, // 开启命名空间
    state: {sum: 0},
    mutations: {...},
    actions: {...},
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}
                
const personAbout = {
	namespace: true,
    state: {...},
    mutations: {...},
    actions: {...},
}
                
const store = new Vuex.Store({
	modules: {
   		countAbout, personAbout
    }
})

  3. 开启命名空间后，组件中访问state数据：

    // 方式一：自己直接读取
this.$store.state.personAbout.list
// 方式二：借助mapState读取
...mapState('countAbout', ['sum', 'school', 'subject'])

  4. 开启命名空间后：组件中读取getters数据

    // 方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
// 方式二：借助mapGetters读取
...mapGetters('countAbout', ['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    // 方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang', person)
// 方式二：借助mapActions
...mapActions('countAbout', {increment: 'jiaOdd', incrementWait: 'jiaWait'})

  6. 开启命名空间后，组件是调用commit

    // 方式一：自己直接调用commit
this.$store.commit('personAbout/ADD_PERSON', person)
// 方式二：借助mapMutations
...mapMutations('countAbout', {increment: 'JIA', decrement: 'J'})
绒毛鸭鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue vuex 挂载_vuex 笔记—vue-cli和router使用vuex
weixin_28756005的博客
12-29 155
vuex 笔记—vue-cli和router使用vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。安装vuex#以下三个方...
【Vue学习笔记_17】Vuex状态管理
weixin_44752429的博客
11-28 273
【Vue学习笔记_17】Vuex状态管理Vuex初识Vuex基本使用Vuex-StateVuex-GettersVuex-MutationsMutations传递参数Mutations提交风格Mutations响应规则Mutations类型常量Vuex-ActionsVuex-ModulesVuex-store目录结构 配套可执行代码示例 => GitHub Vuex初识 Vuex：一个专为Vuejs应用程序开发的状态管理模式，应用于多界面状态管理。它采用集中式存储管理应用的所有组件的状态，并以相应的
vue版数字求和案例,解决select选择后number变为str的方式
ONLYSRY的博客
07-02 881
写一个count组件： app.vue里引用这个组件: 知识点：这里有一个小细节，通过select 选择过后里边的number数字就会变成字符型，导致出现点击2+1变成21而不是3，直接会拼接字符串。这里可以采用 两种方式来解决：............
Vue笔记 Vuex
qiaoyangla的博客
04-06 2053
一、概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且应用于任意组件间通信。 二、何时使用？多个组件需要共享数据时。 三、Vuex的原理图 四、搭建Vuex环境： Vue2要安装Vuex3版本，Vue3要安装Vuex4版本 1、终端输入：npm i vuex@3就可以安装3版本，需要在main.js文件里引入vuex，如下： 使用插件： 2、在src中新建一个store文件夹...
Vue笔记05-Vuex
王劭阳的博客
08-14 196
Vuex概念 Vuex是在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），可以实现组件间通信，适用于任意组件间通信。 当多个组件依赖同一状态、不同组件行为需要变更同一状态的时候，需要使用Vuex，也就是用Vuex来管理公共的变量或者数据。 案例 首先引出一个案例，这个案例是单组件，不使用Vuex来完成的。 有一个Count.vue组件，组件中有几个按钮和一个显示当前数据的区域，通过按钮修改当前值并重新显示。 在App.vue中引入Count..
狂神说Vue笔记整理
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
vue中的VueX详解及使用_vuex详解和用法
2301_82243710的博客
04-29 833
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
vue笔记_使用Vue保存快速笔记
cuk5340的博客
07-31 551
vue笔记 保存快速笔记 (Saving Quick Notes) Saving Quick Notes - Vue, Vuex, Vue Router, Vue Composition API. 保存快速注释-Vue，Vuex，Vue路由器，Vue组成API。 View Demo 查看演示 View Github 查看Github 编译和热重装以进行开发 (Compiles and ho...
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue学习随记.zip_vue_vuex_vue学习知识点笔记_图片上传插件封装
09-23
vue的知识点干货，从路由到vuex的知识点干货
笔记03_手写vue1
08-03
"笔记03_手写vue1"指的是尝试自己实现Vue的部分功能，包括理解vue-router的源码以及完成kvuex（一个简化版Vuex）的getters部分。在描述中，主要任务是解析DOM树获取{{}}格式的内容，以及了解Vue的工作流程。 首先，...
vue相关笔记vuex等等
10-10
Vue的相关技术笔记涵盖了多个重要主题，包括Vue的基础概念、Vuex状态管理、Vue Router路由管理、Webpack构建工具以及与MySQL数据库的交互。 1. **Vue简介**：Vue的核心特性包括声明式渲染、组件化和响应式数据绑定...
vue_notes_app
02-15
"vue_notes_app"看起来是一个基于Vue.js的笔记应用程序项目。在这个项目中，我们可以通过一系列的命令来管理和构建应用。 首先，`npm install`是Node Package Manager的一个命令，用于在项目中安装依赖项。在初始化...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
最新发布
口袋的天空的博客
07-09 761
vue切换主题
vue详解
m0_46702681的博客
07-08 774
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
输入框输入值之后，检索表格中是否存在输入框中的值，存在就让当前文字为红色
weixin_46631078的博客
07-05 287
span v-html="createKeywordHtml_content(scope.row.date)">日期this.searchValue为输入框的值。
前端面试题2（vue3）
God's asylum的博客
07-04 381
在 Vue 3 中，创建自定义指令（Directive）的语法略有变化，需要在方法中定义。// ...});// 创建一个名为 "focus" 的自定义指令el.focus();});在这个例子中，我们创建了一个名为focus的自定义指令，当该指令绑定的元素被插入到 DOM 中时，会自动获得焦点。答案Proxy。
vuex_avatar
08-19
- *2* *3* [vue+element UI 学习总结笔记（十七)_vuex在项目中的应用](https://blog.csdn.net/wh_xia_jun/article/details/100889438)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绒毛鸭鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值