首页 > 其他分享 >Vue学习笔记58--vuex

Vue学习笔记58--vuex

时间：2024-03-25 17:13:28浏览次数：24  
标签：Vue 58 -- sum value state context store

vuex

  1. 专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。
  2. Github地址：https://github.com/vuejs/vuex

什么时候使用Vuex

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

示例一：求和案例(纯vue实现)

Count.vue

<template>
  <div>
    <h3>当前求和为：{{sum}}</h3>
    <!-- <select v-model="selectNo">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>   
    等价于下面写法
   -->
    <select v-model.number="selectNo">
      <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 {
      selectNo: 1,//当前选择的数字
      sum: 0,//当前的和

    }
  },
  methods: {
    increment () {
      this.sum += this.selectNo
    },
    decrement () {
      this.sum -= this.selectNo
    },
    incrementOdd () {
      if (this.sum % 2) {
        this.sum += this.selectNo
      }
    },
    incrementWait () {
      setTimeout(() => {
        this.sum += this.selectNo
      }, 1000);
    },
  }
}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>

App.vue

<template>
  <div class="app">
    <Count />
  </div>
</template>

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


}
</script>

<style scoped>
</style>

Vuex工作原理图示

Vuex环境搭建：操作步骤

第一步：安装，npm install vuex --save(注：vue2中，安装vuex 3版本；vue3中安装vuex 4版本。)

即：vue2——npm i vuex@3、vue3——npm i vuex@4

第二步：创建文件--src/store/index.js

// 该文件用于创建vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用插件
Vue.use(Vuex)
// 准备actions--用于相应组件中的动作
const actions = {}
// 准备mutations-- 用于操作数据(state)
const mutations = {}
// 准备state--用于存储数据(state中存放的就是全局共享数据)
const state = {}

//创建store
// const store = new Vuex.Store({

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

})
// 暴露store
// export default store

第三步：在main.js中创建vm时传入store配置项

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false

// 引入vuex、store
// import Vuex from 'vuex'  // store/index.js
import store from './store'//默认引入index.js
// 使用插件
// Vue.use(Vuex) // store/index.js

// console.log('Vue.prototype==>', Vue.prototype)
// console.log('VueComponent.prototype.__proto__==>', Vue.prototype)

new Vue({
  render: h => h(App), store
  
}).$mount('#app')

示例二：Vuex版本--求和案例

Count.vue

<template>
  <div>
    <h3>当前求和为：{{ $store.state.sum }}</h3>
    <!-- <select v-model="selectNo">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>   
    等价于下面写法
   -->
    <select v-model.number="selectNo">
      <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 {
      selectNo: 1,//当前选择的数字


    }
  },
  methods: {
    increment () {
      this.$store.dispatch('increment', this.selectNo)
    },
    decrement () {
      this.$store.dispatch('decrement', this.selectNo)
    },
    incrementOdd () {
      this.$store.dispatch('incrementOdd', this.selectNo)
    },
    incrementWait () {
      this.$store.dispatch('incrementWait', this.selectNo)
      // setTimeout(() => {
      //   this.$store.dispatch('incrementWait', this.selectNo)
      // }, 1000);
    },
  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>

src/store/index.js

// 该文件用于创建vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用插件
Vue.use(Vuex)

/*  准备actions--用于相应组件中的动作
context--miniStore
actions：建议逻辑处理在该处处理
 */
const actions = {
  increment (context, value) {
    context.commit('Increment', value) //Increment 为 mutations中的方法
  },
  decrement (context, value) {
    context.commit('Decrement', value)
  },
  incrementOdd (context, value) {
    if (context.state.sum % 2) {
      context.commit('Increment', value)//等价于Increment
      // context.commit('IncrementOdd', value)//等价于Increment
    }
  },
  incrementWait (context, value) {
    setTimeout(() => {
      context.commit('Increment', value)//等价于 IncrementWait
      // context.commit('IncrementWait', value)//等价于Increment
    }, 1000);

  },
}

/* 准备mutations
用于操作数据(state)  
不建议写业务逻辑 
*/
const mutations = {
  Increment (state, value) {
    state.sum += value
  },
  Decrement (state, value) {
    state.sum -= value
  },
  IncrementOdd (state, value) {
    // if (state.sum % 2) {  //去action中处理哦
    state.sum += value
    // }
  },
  IncrementWait (state, value) {
    state.sum += value
    // setTimeout(() => {
    //   state.sum += value
    // }, 1000);
  },
}

// 准备state--用于存储数据(state中存放的就是全局共享数据)
const state = {
  sum: 0,//当前的和
}

//创建store
// const store = new Vuex.Store({

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

})
// 暴露store
// export default store

代码简化如下所示：

Count.vue

<template>
  <div>
    <h3>当前求和为：{{ $store.state.sum }}</h3>
    <!-- <select v-model="selectNo">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>   
    等价于下面写法
   -->
    <select v-model.number="selectNo">
      <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 {
      selectNo: 1,//当前选择的数字


    }
  },
  methods: {
    increment () {
      // this.$store.dispatch('increment', this.selectNo)

      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Increment', this.selectNo)
    },
    decrement () {
      // this.$store.dispatch('decrement', this.selectNo)

      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Decrement', this.selectNo)
    },
    incrementOdd () {
      this.$store.dispatch('incrementOdd', this.selectNo)
    },
    incrementWait () {
      this.$store.dispatch('incrementWait', this.selectNo)
    },
  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>

src/store/index.js

// 该文件用于创建vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用插件
Vue.use(Vuex)

/*  
准备actions--用于相应组件中的动作
1.context--miniStore
2.actions：建议逻辑处理在该处处理
3.如果没有业务路基处理，可直接使用mutations中对应的方法
 */
const actions = {
  /*  increment (context, value) {
     context.commit('Increment', value) //Increment 为 mutations中的方法
   },
   decrement (context, value) {
     context.commit('Decrement', value)
   }, */
  incrementOdd (context, value) {
    if (context.state.sum % 2) {
      context.commit('Increment', value)//等价于Increment
      // context.commit('IncrementOdd', value)//等价于Increment
    }
  },
  incrementWait (context, value) {
    setTimeout(() => {
      context.commit('Increment', value)//等价于 IncrementWait
      // context.commit('IncrementWait', value)//等价于Increment
    }, 1000);

  },
}

/* 
准备 mutations
用于操作数据(state)  
不建议写业务逻辑 
*/
const mutations = {
  Increment (state, value) {
    state.sum += value
  },
  Decrement (state, value) {
    state.sum -= value
  },
  IncrementOdd (state, value) {
    // if (state.sum % 2) {  //去action中处理哦
    state.sum += value
    // }
  },
  IncrementWait (state, value) {
    state.sum += value
    // setTimeout(() => {
    //   state.sum += value
    // }, 1000);
  },
}

// 准备state--用于存储数据(state中存放的就是全局共享数据)
const state = {
  sum: 0,//当前的和
}

//创建store
// const store = new Vuex.Store({

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

})
// 暴露store
// export default store

　　

　　

 

标签：Vue,58,--,sum,value,state,context,store
From： https://www.cnblogs.com/YYkun/p/18093809

相关文章

  • export default无法被解构
    最近在做项目过程中，遇到一个问题，对一个UI组件，解构出我们需要的组件，进行注册，但是运行的时候报错了，写了一个小例子//user.jsexportdefault{obj:{name:1111},obj2:{name:22222},}//index.jsimport{obj,obj2}from"./user.js"console.log(obj,obj2)代码运行编译时候报错了......
  • JavaScript 基础 - 第1天
     了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。体会现实世界中的事物与计算机的关系理解什么是数据并知道数据的分类理解变量存储数据的“容器”掌握常见运算符的使用，了解优先级关系知道JavaScript数据类型隐式转......
  • react 中echarts-for-react使用resize解决图表自适应问题
     importReact,{PureComponent}from"react";importReactEchartsfrom'echarts-for-react';import{useEventListener}from'ahooks';useEventListener('resize',()=>{ref?.current?.getEch......
  • Knative 助力 XTransfer 加速应用云原生 Serverless 化
    作者：元毅公司介绍XTransfer是一站式外贸企业跨境金融和风控服务公司，致力于帮助中小微企业大幅降低全球展业的门槛和成本，提升全球竞争力。公司连续7年专注B2B外贸金融服务，已成为中国B2B外贸金融第一平台，目前全球的贸易企业也都已开始使用XTransfer。业务场景XTransfer......
  • 中断（EXTI）
    学习笔记，仅供参考。1.中断什么是中断？中断一般来自硬件（如片上外设、外部I/O输入等）发生的事件，当这些硬件产生中断信号时，CPU会暂停当前运行的程序，转而去处理相关硬件的中断服务程序。对于单片机来说，当发生中断事件时，CPU会处理中断并保留现场，当中断事件结束后，程序会回到保留的......
  • 【ARM版银河麒麟源码编译安装开源混合整数规划器SCIP和PySCIPOpt】
    ARM版银河麒麟修炼之路第一章ARM版银河麒麟源码编译安装开源混合整数规划器SCIP和PySCIPOpt文章目录ARM版银河麒麟修炼之路前言一、本机软硬件配置二、编译环境搭建1.添加Ubuntu20.04apt源2.apt安装依赖库3.源码编译安装其它依赖库1.安装metis2.安装LAPACK3.安装GMP......
  • MYSQL多表设计，多表查询，事务，索引
    目录一多表设计1.1一对多1.1.1 外键约束1.2一对一1.3多对多二多表查询2.1数据准备：2.2笛卡儿积：2.3分类2.3.1内连接2.3.2外连接 三子查询 3.1标量子查询3.2列子查询3.3行子查询3.4表子查询四事务4.1场景4.2语法 4.3事务特性 五索引5.1索引概述 5......
  • 「08」图像幻灯片放映：以幻灯片形式播放指定图像文件
    「08」图像幻灯片放映以幻灯片形式播放指定图像文件通过两张图片（或以上）的放映，实现图片动图轮播。可以应用于：LOGO、活动促销、以及添加联系方式等等。优点：可循环或随机多张轮播图像缺点：图片尺寸统一，方便缩放注意：勾选「循环」按钮实操步骤第1步添加来原在「来源」里点「......
  • 速通数据结构第三站 单链表
    系列文章目录速通数据结构与算法系列1  速通数据结构与算法第一站复杂度          http://t.csdnimg.cn/sxEGF2  速通数据结构与算法第二站顺序表 3 速通数据结构与算法第二站单链表 感谢佬们支持！目录系列文章目录前言一、单链表   ......
  • 【VTKExamples::Points】第十期 NormalEstimation
    很高兴在雪易的CSDN遇见你 VTK技术爱好者QQ：870202403   公众号：VTK忠粉前言本文分享VTK样例NormalEstimation，并解析接口vtkPCANormalEstimation，希望对各位小伙伴有所帮助！感谢各位小伙伴的点赞+关注，小易会继续努力分享，一起进步！你的点赞就是我的动力(＾Ｕ＾)ノ~ＹＯ1.Norm......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99