VueX入门：集中状态管理与组件通信实践-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60264901/article/details/124055263

在学习前我总会想几个问题

为什么学？

学它有什么便利性？

如何去学好？

根据这几个问号让我们来进行对Vuex的学习吧~

Vuex相关概念

Vuex的定义

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

何时使用Vuex

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

搭建Vuex环境

所需文件如下图：

分析环境中的相关组成：

//store文件夹里的index.js是用于创建Vuex中最为核心的store

import Vuex from 'vuex' //引入Vuex

const actions ={ } //准备actions--用于响应组件中的动作

const mutations ={ } //用于操作数据(state)

const state={ } //用于存储数据

Step1：在安装vuex的时候需要注意版本问题否则也是无法使用的。

npm install vuex@3.0

Step2:创建文件：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
})

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

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

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

Vue与Vuex的使用对比

使用Vue版案例

文件位置如图所示：

Count.vue中代码：

Count.vue中来放整个页面的结构框架以及当点击（事件）后就能产生的计算求和效果


<template>
 <div>
    <h1>当前求和为：{{sum}}</h1>
    <select v-model="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(){
       // console.log(this);this指的是什么
       this.sum-=this.n
      },
      incrementOdd(){
        if(this.sum%2){
          this.sum+=this.n
        }
      },
      incrementWait(){
        setTimeout(()=>{
        // 函数体
         this.sum+=this.n
        },500)
      }
    }
}
</script>

<style scoped>
    button{
      margin: 10px;
    }
</style>

main.js中的代码：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//创建vm
new Vue({
    el: '#app',
    render: h => h(App)
})

App.vue中的代码：

<template>
	<div>
   <count/>
  </div>
</template>

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

使用Vuex版案例

使用Vuex的意义：就是共享一个数据。如下图理解：

当用Vuex来写代码，如图展示所需文件：

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.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style >
	button{
		margin-left: 5px;
	}
</style>

Store文件夹中的index.js中的代码：

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'

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

//准备actions——用于响应组件中的动作
const actions = {
        jiaOdd(context, value) {
            console.log('actions中的jiaOdd被调用了')
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            console.log('actions中的jiaWait被调用了')
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500)
        }
    }
    //准备mutations——用于操作数据（state）
const mutations = {
        JIA(state, value) {
            console.log('mutations中的JIA被调用了')
            state.sum += value
        },
        JIAN(state, value) {
            console.log('mutations中的JIAN被调用了')
            state.sum -= value
        }
    }
    //准备state——用于存储数据，比如当前求和的sum
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'
// 引入vuex
import Vuex from 'vuex'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
    //使用插件
Vue.use(vueResource)
Vue.use(Vuex)


//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

App.vue中的代码：

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

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
		mounted() {
			console.log('App',this)
		},
	}
</script>