Vue —— 进阶 Vuex(零)(概念、工作原理、环境搭建、基本使用、getters)

简介: Vue —— 进阶 Vuex(零)(概念、工作原理、环境搭建、基本使用、getters)

一、理解 vuex

1. 什么是 vuex?

概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式管理(读 / 写),也是一种组件间的通信方式,且适用于任意组件间通信。

2. 什么时候使用 vuex?
  1. 多个组件依赖于同一个状态
  2. 来自不同组件的行为需要变更同一状态

二、求和案例(纯vue版)

  1. 第一个下拉栏控制每次加或减的数值。
  2. 加一
  3. 减一
  4. 当和为奇数时再加
  5. 等一等再加

Count.vue

  <template>
    <div>
      <h2>当前求和为:{{sum}}</h2>
      <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: "myCount",
    data(){
      return{
        n:1, //用户选择的数字
        sum: 0 //当前的和
      }
    },
    methods:{
      increment(){
        this.sum += this.n
      },
      decrement(){
        this.sum -= this.n
      },
      incrementOdd(){
        if(this.sum % 2){
          this.sum += this.n
        }
      },
      incrementWait(){
        setTimeout(()=>{
          this.sum += this.n
        },500)
      }
    }
  };
  </script>
  <style scoped>
    button{
      margin-left: 5px;
    }
  </style>

App.vue

  <template>
    <div>
      <Count/>
    </div>
  </template>
  <script>
  // 引入组件
  import Count from "./components/Count.vue";
  export default {
    name: "App",
    components: { Count },
  };
  </script>

0726f7274faa4dbc9c98eb25164417af.png

三、vuex 工作原理图

7582e1c6d45a484eb1d62741267c0533.png

1. 理解
  1. Vue Components:看作顾客
  2. Actions:看作点餐服务员
  3. Mutations:看作后厨厨师
  4. State:看作上来的菜

Actions:可以不经过它,它可以连接后端的一些接口。

四、搭建 vuex 环境

1. 安装 vuex

终端键入命令:npm i vuex@3

对应的是 vue2.x 版本

2. 创建文件

在 src 文件下创建文件:src/store/index.js

  // 该文件用于创建Vuex中最为核心的store
  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 准备actions——用于响应组件中的动作
  const actions = {}
  // 准备mutations——用于修改state中的数据(state)
  const mutations = {}
  // 准备state——用于存储具体的数据
  const state = {}
  // 创建并暴露store
  export default new Vuex.Store({
      actions,
      mutations,
      state
  })

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

  // 引入 Vue
  import Vue from 'vue'
  // 引入 App
  import App from './App.vue'
  // 引入 store
  import store from './store'
  // 关闭 vue 的生产提示
  Vue.config.production = false
  // 使用插件
  //创建 vm
  new Vue({
      el:'#app',
      render: h => h(App),
      store
  })

五、求和案例(vuex版)

Count.vue

在 Count.vue 的 methods 中配置方法。

简单的逻辑,直接在 methods 中 this.$store.commit('方法', 数据)。(此处的方法为 index.js 中 mutations 中配置的方法)

复杂的逻辑,通过在 methods 中 this.$store.dispatch('方法', 数据)。(此处的方法为 index.js 中 actions 中配置的方法)

页面呈现时的模板语法:{{$store.state.sum}}

  <template>
    <div>
      <h2>当前求和为:{{$store.state.sum}}</h2>
      <select v-model.number="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="add">+</button>
      <button @click="sub">-</button>
      <button @click="addOdd">当前求和为奇数再加</button>
      <button @click="addWait">等一等再加</button>
    </div>
  </template>
  <script>
  export default {
    name: "myCount",
    data(){
      return{
        n:1, //用户选择的数字
        sum: 0 //当前的和
      }
    },
    methods:{
      add(){
        this.$store.commit("ADD", this.n);
      },
      sub(){
        this.$store.commit("SUB", this.n);
      },
      addOdd(){
        this.$store.dispatch("addOdd", this.n);
      },
      addWait(){
        this.$store.dispatch("addWait", this.n);
      }
    }
  };
  </script>
  <style scoped>
    button{
      margin-left: 5px;
    }
  </style>

index.js


在 state 中准备用于存储的数据 sum。

在 mutations 中准备用于修改 state 中数据的函数 ADD 和 SUB。(注意配置在 mutations 中的函数名一般大写)。

在 actions 中准备用于响应组件的函数 addOdd 和 addWait。

  // 该文件用于创建Vuex中最为核心的store
  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 准备actions——用于响应组件中的动作
  const actions = {
      addOdd(context, value){
          console.log('actions中的addOdd被调用了');
          if(context.state.sum % 2){
              context.commit('ADD',value)
          }
      },
      addWait(context, value){
          console.log('actions中的addWait被调用了');
          setTimeout(()=>{
              context.commit('ADD', value)
          },500)
      }
  }
  // 准备mutations——用于修改state中的数据(state)
  const mutations = {
      ADD(state, value){
          console.log('mutations中的ADD被调用了',state, value);
          state.sum += value
      },
      SUB(state, value){
          console.log('mutations中的SUB被调用了',state, value);
          state.sum -= value
      }
  }
  // 准备state——用于存储具体的数据
  const state = {
      sum: 0 //当前的和
  }
  // 创建并暴露store
  export default new Vuex.Store({
      actions,
      mutations,
      state
  })

https://www.bilibili.com/video/BV16U4y117xN?t=1.8

vuex求和展示

六、vuex 的基本使用

1. 步骤

./store/index.js

  1. 初始化数据
  2. 配置 actions
  3. 配置 mutations:里面的函数名一般大写
  4. 操作文件 index.js
  // 引入Vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  // 引用Vuex
  Vue.use(Vuex)
  const actions = {
      // 响应组件中加的动作
      add(context, value){
          context.commit('ADD', value)
      }
  }
  const mutations = {
      // 执行加
      ADD(state, value){
          state.sum += value
      }
  }
  // 初始化数据
  const state = {
      sum: 0
  }
  // 创建并暴露
  export default new Vuex.Store({
      actions,
      mutations,
      state
  })
2. 组件中读取 vuex 中的数据

在组件的模板里面读取不需要加 this,在组件的 JS 里面写需要加 this。

  $store.state.sum
3. 组件中修改 vuex 中的数据

经过 actions 到 mutations 用 dispatch。

  $store.dispatch('actions中的方法名', 数据)

直接到 mutations 用 commit。

  $store.commit('mutations中的方法名', 数据)

注意:若没有网络请求或其他业务逻辑,组件中也可以越过 actions,即不写 dispatch,直接编写 commit。

七、getters 的使用

1. 概念

当 state 中的数据需要经过加工后再使用时,可以使用 getters 加工。(逻辑较为复杂时使用,可以被多个组件复用)。

2. 在 .store/index.js 中追加 getters 配置
  .....
  const getters = {
    bigSum(state) {
      return state.sum * 10
    }
  }
  .....
  export dafault new Vuex.Store({
    .....
    getters
  })
3. 实例:数字扩大 10 倍

store.js

  1. 在该文件下追加配置
  .....
  const getters = {
    bigSum(state) {
      return state.sum * 10
    }
  }
  .....
  export dafault new Vuex.Store({
    .....
    getters
  })

Count.vue

  1. 添加模板字符串,在组件中读取数据 $store.getters.bigSum,其余不变
  <h3>当前求和放大10倍:{{$store.getters.bigSum}}</h3>

d3bed2d6853849499a12cb5a38922319.png

八、vuex 与 vue 的类比

vuex 中的 state 相当于 vue 中的 data。

vuex 中的 mutations 相当于 vue 中的 methods。

vuex 中的 getters 相当于 vue 中的 computed。

vuex 中的 actions 相当于 vue 中的 methods

注意:同步方法写在 mutations,异步写在 actions 里。

不积跬步无以至千里 不积小流无以成江海

相关文章
|
6天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
21 0
|
6天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
1天前
|
JavaScript Java 关系型数据库
基于SprinBoot+vue的租房管理系统2
基于SprinBoot+vue的租房管理系统2
8 0
|
2天前
|
自然语言处理 JavaScript 数据可视化
5个值得推荐的Vue后台管理框架
几个优秀好看的 Vue 后台管理框架,每个框架都有自己的特点和优势,开发者可以根据项目需求选择适合的框架。
12 0
|
5天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
13 1
|
6天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
6天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
12 0
|
6天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
6天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
6天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
10 0