当前位置:   article > 正文

Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)_vue怎么深入学习

vue怎么深入学习

辅助理解vuex的工作原理:好比一个客户(VueComponents)去饭店吃饭,客人首先和服务员(Actions)对接,然后服务员再将客户的需求讲述给厨房的厨师(Mutations)。存在一种情况、客户和厨师很熟、厨师也知道客户的口味。则可以直接跳过服务员直接对话。另外一种情况,服务员可以处理一些特殊的情况,比如客户点的菜一起吃可能会造成不良的影响,这个时候服务员的作用就出来了。也就是说Actions 可以处理一些业务逻辑,调用接口,发送ajax请求。

1.概念

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

在这里插入图片描述

2.何时使用?

多个组件需要共享数据时

3.搭建vuex环境

安装vuex:npm i vuex,要安装对应的版本

安装可能出现的问题:https://blog.csdn.net/weixin_43304253/article/details/126633354

3.1 创建文件:src/store/index.js

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


//第二种形式

// //创建store
// const store = new Vuex.Store({
//     actions,
//     mutations,
//     state,
// })


// //导出store
// export default store
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

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

   //引入store
   import store from './store'
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

4.基本使用

4.1、初始化数据、配置actions、配置mutations,操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

4.2、组件中读取vuex中的数据:$store.state.sum

4.3、 组件中修改vuex中的数据

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

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


5、实际应用

描述:制作一个简单的数字累加器,加法、减法、定时加、累加和为奇数加
目的:练习使用vuex、了解期工作的原理

5.1 项目结构

在这里插入图片描述

5.2 store/index.js

//该文件用于创建Vuex中最为核心的store

//引入Vuex
import Vuex from 'vuex'
//引入Vue
import Vue from 'vue'

//使用插件
Vue.use(Vuex)

//准备action-- 用于响应组件中的动作
const actions = {
    jia(context, value) {
        console.error("Action中的", context, value)
        context.commit('JIA', value)
    },

    jiaodd(context, value) {
        if (context.state.sum % 2) {
            console.error("jiaodd")
            context.commit('JIA', value)
        }
    },

    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    }
}

//准备mutations-- 用于操作数据(state)
const mutations = {
    JIA(state, value) {
        console.error("Mutations中的", state, value)
        state.sum += value

    },

    JIAN(state, value) {
        state.sum -= value

    }

}

//准备state--用于存储数据
const state = {
    sum: 0 //当前的和
}

//第一种形式
//创建并且暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})



//第二种形式

// //创建store
// const store = new Vuex.Store({
//     actions,
//     mutations,
//     state,
// })


// //导出store
// export default store


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75

5.3 components/Count.vue

<template>
  <div>
    <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.dispatch("jia", this.n);
    },
    decrement() {
      this.$store.commit("JIAN", this.n);
    },
    incrementOdd() {
      this.$store.dispatch("jiaodd", this.n);
    },
    incrementWait() {
		this.$store.dispatch('jiaWait',this.n)

    },
  },
};
</script>

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

5.4 App.vue

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
	}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

5.6 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入store
import store from './store/index.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  beforenCreate() {
    Vue.prototype.$bus = this
  }

})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

6、实战测试效果

6.1 视频效果

vuex

6.2 原理图解(代码走向)

在这里插入图片描述

6.3 提示注意

  • 1、点击加号、纯粹的进行加操作,可以直接跳过dispatch,直接调用commit
  • 2、点击减号、和加法类似
  • 3、当累加和为奇数、可以继续添加。这个时候就要在Actions中进行逻辑判断、根据判断的结果在调用commit
  • 4、定时器也可以直接写在Actions

7、疑问点和注意点

  • 1、为什么非让把业务逻辑写在actions中,直接在组件中写不好吗?通过点击按钮、然后事件进行判断

原因:假如有复杂的业务逻辑处理,比如验证钞票的真假、需要调用多台服务器进行真假的判断。

  • 2、如果在actions中直接操作state数据、vuex开发者工具看不到数据的变化。vuex开发者工具只是监听mutations
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号