vuex（一）vuex简介&vuex工作原理图&搭建vuex环境&vuex的小案例_vuex原理图

1.Vuex简介

*什么是vuex：专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信方式，且适用于任意组件间的通信

*什么时候用vuex：多个组件依赖于同一个状态；来自不同组件的行为需要变更同一状态

2.vuex工作原理图

（图片来源尚硅谷）

3.搭建vuex环境

*在2022年2月7日，vue3成为了默认版本，如果执行npm i vue则直接安装vue3，同时vuex4随之变成默认版本，如果执行npm i vuex则直接安装vuex4，但vuex4只能在vue3中使用，如果当前使用的是vue2，则必须使用vuex3：npm i vuex@3

*安装：npm i vuex->创建store文件夹->在store文件夹下创建index.js，该js文件用于创建vuex中最为核心的store->在index.js里引入vue和vuex->使用Vue.use(Vuex)-> 在main.js里引入store

//这是storexia的index文件
//该文件用于创建vuex中最为核心的store
 
//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions={}
//准备mutations--用于操作数据
const mutations={}
//准备state--用于存储数据
const state={}
//创建并暴露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/index.js'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)
//创建vm
new Vue({
	el:'#app',
	store,
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

*至此，所有的vm和vc身上都有了$store

4.vuex的小案例

<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('add',this.n)
			},
			decrement(){
				this.$store.dispatch('sub',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('oddAdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('waitAdd',this.n)
			},
		},
	}
</script>
 
<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

//该文件用于创建vuex中最为核心的store
 
//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions={
    add(context,value){
        context.commit('ADD',value)
    },
    sub(context,value){
        context.commit('SUB',value)
    },
    oddAdd(context,value){
        if(context.state.sum%2==1){
            context.commit('ADD',value)
        }
    },
    waitAdd(context,value){
        setTimeout(() => {
            context.commit('ADD',value)
        }, 1000);
    }
}
//准备mutations--用于操作数据
const mutations={
    ADD(state,value){
        state.sum+=value
    },
    SUB(state,value){
        state.sum-=value
    }
}
//准备state--用于存储数据
const state={
    sum:0 //当前的和
}
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})