vuex简介

系统管理员 2024-05-03 14:33 75阅读 0赞

![在这里插入图片描述][e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]

#### 文章目录 ####

*  前言
 *  理解vuex
 *   *  vuex是什么
     *  什么时候使用Vuex
     *  事件总线与Vuex区别
 *  Vuex工作原理图
 *  案例

## 前言 ##

> ?前言?  
> ?博客：【无聊大侠hello word】?  
> ✍有一点思考，有一点想法，有一点理性！✍  
> ✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍

## 理解vuex ##

### vuex是什么 ###

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

### 什么时候使用Vuex ###

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

### 事件总线与Vuex区别 ###

1.  事件总线实现：  
    ![在这里插入图片描述][6041f77be27b43169d2cb93cc8b3d5a1.png]
2.  vuex实现  
    ![在这里插入图片描述][993b959a447341979490e283214112ae.png]

## Vuex工作原理图 ##

![在这里插入图片描述][dd4ce95a3fa545d7bd53b1393aad430b.png]

## 案例 ##

![在这里插入图片描述][b7aad5efa2c04e0d8798b99d96672d49.png]  
1.求和案例\_纯vue版:

![在这里插入图片描述][05e2adb03e404415bd306edfc2928f92.png]

> Count.vue

<template>
    	<div>
    		<h1>当前求和为：{
       {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, //用户选择的数字
    				sum:0 //当前的和
    			}
    		},
    		methods: {
          
    			increment(){
          
    				this.sum += this.n
    			},
    			decrement(){
          
    				this.sum -= this.n
    			},
    			incrementOdd(){
          
    				if(this.sum % 2){
          
    					this.sum += this.n
    				}
    			},
    			incrementWait(){
          
    				setTimeout(()=>{
          
    					this.sum += this.n
    				},500)
    			},
    		},
    	}
    </script>
    
    <style lang="css">
    	button{
          
    		margin-left: 5px;
    	}
    </style>

> App.vue

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

> main.js

//引入Vue
    import Vue from 'vue'
    //引入App
    import App from './App.vue'
    //引入插件
    import vueResource from 'vue-resource'
    //关闭Vue的生产提示
    Vue.config.productionTip = false
    //使用插件
    Vue.use(vueResource)
    
    //创建vm
    new Vue({
        
    	el:'#app',
    	render: h => h(App),
    	beforeCreate() {
        
    		Vue.prototype.$bus = this
    	}
    })

2.求和案例\_vuex版

npm i vuex

新建文件【src/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, value);
        context.commit("JIA", value);
      },
      jian(context, value) {
        
        // console.log('actions中的jian被调用了', context, value);
        context.commit("JIAN", value);
      },
      jiaOdd(context, value) {
        
        // console.log('actions中的jiaOdd被调用了', context, value);
        if (context.state.sum % 2) {
        
          context.commit("JIA", value);
        }
      },
      jiaWait(context, value) {
        
        // console.log('actions中的jiaWait被调用了', context, value);
        setTimeout(() => {
        
          context.commit("JIA", value);
        }, 500);
      },
    };
    
    //准备mutations——用于操作数据（state）
    const mutations = {
        
      JIA(state, value) {
        
        // console.log('mutations中的JIA被调用了', state, value);
        state.sum += value;
      },
      JIAN(state, value) {
        
        // console.log('mutations中的JIAN被调用了', state, value);
        state.sum -= value;
      },
    };
    
    //准备state——用于存储数据
    const state = {
        
      sum: 0, //当前的和
    };
    
    //创建并暴露store
    export default new Vuex.Store({
        
      actions,
      mutations,
      state,
    });

> main.js

//引入Vue
    import Vue from 'vue'
    //引入App
    import App from './App.vue'
    //引入插件
    import vueResource from 'vue-resource'
    //引入store
    import store from './store'
    //关闭Vue的生产提示
    Vue.config.productionTip = false
    //使用插件
    Vue.use(vueResource)
    
    //创建vm
    new Vue({
        
    	el:'#app',
    	store,
    	render: h => h(App),
    	beforeCreate() {
        
    		Vue.prototype.$bus = this
    	}
    })

> App.vue

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

> 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.dispatch('jian', this.n)
    		},
    		incrementOdd() {
          
    			this.$store.dispatch('jiaOdd', this.n)
    		},
    		incrementWait() {
          
    			this.$store.dispatch('jiaWait', this.n)
    		},
    	},
    	mounted() {
          
    		console.log(this);
    	},
    }
    </script>
    
    <style lang="css">
    button {
          
    	margin-left: 5px;
    }
    </style>

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**

[e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/5392b2070c8c43908f3940c226fbe548.gif
[6041f77be27b43169d2cb93cc8b3d5a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/493a2df471174f2e9ca5a55db84f2cab.png
[993b959a447341979490e283214112ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/233472716f884f4a8051d3862253d1c5.png
[dd4ce95a3fa545d7bd53b1393aad430b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/60bd3f9c69d640a1a3daecb68e7fce84.png
[b7aad5efa2c04e0d8798b99d96672d49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/8a7d3788ee224ec5ae1d71c2ca18249f.png
[05e2adb03e404415bd306edfc2928f92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/07cfa5ed9ed8410f8c52fc51ba95e4da.png