纯vue
test.vue
<template>
<div>
<h2>结果是：{{sum}}</h2>
<br>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="jia">+</button>
<button @click="jian">-</button>
<button @click="oddJia">基数加偶不加</button>
<button @click="wait">等一等再加</button>
</div>
</template>
<script>
export default {
data(){
return {
n:1,//用户选择的数字
sum:0
}
},
methods:{
jia(){
this.sum += this.n
},
jian(){
this.sum -= this.n
},
oddJia(){
if(this.sum % 2){
this.sum += this.n
}
},
wait(){
setTimeout(() => {
this.sum += this.n
},500)
}
}
}
</script>
vuex版本
确定把公共属性是sum
index.js
// 存储结果状态
const state={
sum:0
}
test.vue
methods:{
jia(){
// this.sum += this.n
console.log(this)
}
打印this查看store 这个API，调用其方法
store方法.PNG
actions这些方法方便做业务，方便复用，可以一直使用dispatch方法
- test.vue
jia(){
// this.sum += this.n
this.$store.dispatch('jia',this.n)
}
通过调用dispatch这个方法，能调用actions这个对象里面的方法
第一个参数：调用的方法名
第二个参数：给调用的方法传参数
actions这个对象新建一个方法提供dispatch这个方法，并和他的调用名一致，有网络请求写在这里更清晰
index.js
//响应组件请求，存储请求动作
const actions={
jia(context,value){
console.log(context)
console.log(value)
}
}
actions.PNG
- jia(context,value)
actions里面的方法名必须和dispatch第一个参数一致，因为actions就是为dispatch方法而生的 - 第一个参数：
是一个小的store，也可以叫文档上下文，因为要把可能使用的方法给jia这个方法，不然actions里面的方法无法把动作提交给下一个对象mutations - 第二个参数：
这是dispatch提交给jia这个方法的值
jia提交请求给mutations，调用commit这个方法
//响应组件请求，存储请求动作
const actions={
jia(context,value){
// console.log(context)
// console.log(value)
context.commit('JIA',value)
// 第一个参数：方法名，第二个参数：值
}
}
jia这个函数调用commit提交一个方法和数据给mutations这个对象，所以mutations也有有一个一模样方法来接收数据
//操作state数据
const mutations={
JIA(state,value){
console.log(state)
console.log(value)
}
}
mutation.PNG
- JIA(state,value)
第一个参数：就是state对象里面的内容
第二个参数：就是前传过来的值
//操作state数据
const mutations={
JIA(state,value){
// console.log(state)
// console.log(value)
state.sum += value
}
}
// 存储结果状态
const state={
sum:0
}
//显示页面也要改
<h2>结果是：{{$store.state.sum}}</h2>
test.vue
<template>
<div>
<h2>结果是：{{$store.state.sum}}</h2>
<br>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="jia">+</button>
<button @click="jian">-</button>
<button @click="oddJia">基数加偶不加</button>
<button @click="wait">等一等再加</button>
</div>
</template>
<script>
export default {
data(){
return {
n:1,//用户选择的数字
sum:0
}
},
methods:{
jia(){
// this.sum += this.n
this.$store.dispatch('jia',this.n)
},
jian(){
// this.sum -= this.n
this.$store.dispatch('jian',this.n)
},
oddJia(){
// if(this.sum % 2){
// this.sum += this.n
this.$store.dispatch('oddJia',this.n)
// }
},
wait(){
// setTimeout(() => {
// // this.sum += this.n
this.$store.dispatch('wait',this.n)
// },500)
}
}
}
</script>
index.js
import Vuex from 'vuex'
//导入vuex
import Vue from 'vue'
// 使用Vuex
Vue.use(Vuex)
//响应组件请求，存储请求动作
const actions={
jia(context,value){
// console.log(context)
// console.log(value)
context.commit('JIA',value)
},
jian(context,value){
context.commit('JIAN',value)
},
oddJia(context,value){
// if(this.sum % 2){
context.commit('ODDJIA',value)
// }
},
wait(context,value){
setTimeout(() => {
context.commit('WAIT',value)
},500)
}
}
//操作state数据
const mutations={
JIA(state,value){
// console.log(state)
// console.log(value)
state.sum += value
},
JIAN(state,value){
state.sum -= value
},
ODDJIA(state,value){
if(state.sum % 2){
state.sum += value
}
},
WAIT(state,value){
setTimeout(() => {
state.sum += value
},500)
}
}
// 存储结果状态
const state={
sum:0
}
export default new Vuex.Store({
actions,
mutations,
state
})
可以处理一些问题，如果不经过actions处理，可以在组件中直接调用mutations里面的commit方法，这样actions就不要再commit了
test.vue
<template>
<div>
<h2>结果是：{{$store.state.sum}}</h2>
<br>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="jia">+</button>
<button @click="jian">-</button>
<button @click="oddJia">基数加偶不加</button>
<button @click="wait">等一等再加</button>
</div>
</template>
<script>
export default {
data(){
return {
n:1,//用户选择的数字
sum:0
}
},
methods:{
jia(){
// this.sum += this.n
// this.$store.dispatch('jia',this.n)
this.$store.commit('JIA',this.n)//这里变化了
},
jian(){
// this.sum -= this.n
// this.$store.dispatch('jian',this.n)
this.$store.dispatch('JIAN',this.n)//这里变化了
},
oddJia(){
// if(this.sum % 2){
// this.sum += this.n
this.$store.dispatch('oddJia',this.n)
// }
},
wait(){
// setTimeout(() => {
// // this.sum += this.n
this.$store.dispatch('wait',this.n)
// },500)
}
}
}
</script>
index.vue
import Vuex from 'vuex'
//导入vuex
import Vue from 'vue'
// 使用Vuex
Vue.use(Vuex)
//响应组件请求，存储请求动作
const actions={
// jia(context,value){
// console.log(context)
// console.log(value)
// context.commit('JIA',value)
// },//这里变化了
// jian(context,value){
// context.commit('JIAN',value)
// },//这里变化了
oddJia(context,value){
// if(this.sum % 2){
context.commit('ODDJIA',value)
// }
},
wait(context,value){
setTimeout(() => {
context.commit('WAIT',value)
},500)
}
}
//操作state数据
const mutations={
JIA(state,value){
// console.log(state)
// console.log(value)
state.sum += value
},
JIAN(state,value){
state.sum -= value
},
ODDJIA(state,value){
if(state.sum % 2){
state.sum += value
}
},
WAIT(state,value){
setTimeout(() => {
state.sum += value
},500)
}
}
// 存储结果状态
const state={
sum:0
}
export default new Vuex.Store({
actions,
mutations,
state
})
网友评论