vuex-使用小demo

2022-07-02 本文已影响0人 tutututudou

纯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
})

vuex-使用小demo

vuex版本

jia提交请求给mutations，调用commit这个方法

猜你喜欢

热点阅读