首页 > 其他分享 >Vue.js Vuex实现求和案例

Vue.js Vuex实现求和案例

时间:2023-03-23 23:01:20浏览次数:47  
标签:Vue value js state context Vuex store

视频

Vuex版本

components

Count.vue

<template>
	<div>
		<!-- 模板里能看见vc上所有东西 -->
		<h1>当前求和为:{{$store.state.sum}}</h1>

		<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(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

store

index.js

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

//准备actions——用于响应组件中的动作
const actions = {
	/* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){//context = ministore
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据(state)
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了')
		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'
	export default {
		name:'App',
		components:{Count},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store,因为命名符合规格所以不用加index
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

标签:Vue,value,js,state,context,Vuex,store
From: https://www.cnblogs.com/chuixulvcao/p/17249840.html

相关文章

  • Vue.js 搭建Vuex环境
    视频npmivuex@33.搭建vuex环境创建文件:src/store/index.js//引入Vue核心库importVuefrom'vue'//引入VueximportVuexfrom'vuex'//应用Vuex插件Vue.u......
  • Vue.js 纯Vue实现求和案例
    纯Vue实现视频106纯Vue版本componentsCount.vue<template> <div> <h1>当前求和为:{{sum}}</h1> <selectv-model.number="n"> <!--收集到的是字符串类型,v-mo......
  • Vue.js Vuex简介
    简介视频......
  • Vue,js Vuex工作原理图
    Vuex原理解析视频107传参带数据允许走这条线store管理......
  • jsonpath解析淘票票城市
    步骤:首先找到城市的接口通过F12打开检查点击北京即可得到爬取数据的接口打开url发现显示的是jsonp121({"returnCode":"0","returnValue":{}});原因:​ 淘票票的请求头......
  • JS基础(上)
      JavaScript与HTML和CSS共同构成了我们所看到的网页,其中:HTML用来定义网页的内容,例如标题、正文、图像等;CSS用来控制网页的外观,例如颜色、字体、背景等;J......
  • EQ-BDS面板正则内嵌JS帮助
    正则命令使用JS的语法环境变量机制API和接口调试输出获取日期file类读入文件写入文件eq类输出文本到控制台发送QQ私聊消息发送QQ群聊消息获取操作系统名......
  •  js解压gzip字符串方法:  js怎么解压gzip字符串?
    在JavaScript中,可以使用`pako`库对gzip格式的数据进行解压缩。`pako`是一个纯JavaScript实现的压缩库,支持多种压缩算法,包括gzip。使用`pako`库解压gzip字符串的步骤如下:1......
  • Vue——initInjections【九】
    前言前面我们简单的了解了vue初始化时的一些大概的流程,这里我们详细的了解下具体的内容;内容这一块主要围绕init.ts中的initInjections进行剖析,初始化生命周期之后紧......
  • Vue 核心(一)
    目录Vue核心(一)一、Vue简介1、概述2、学前准备3、第一个程序二、模板语法三、数据绑定四、MVVM模型五、数据代理1、defineProperty2、理解数据代理3、Vue中的......