Vue数据共享vuex基础部分(原理、环境搭建、求和案例)

1. vuex介绍

在Vue中实现集中式共享数据管理的一个Vue插件，共享数据能让多个vue组件进行读写，从而实现任意组件间通信的功能。点我访问官网

如下是使用全局事件总线，让B、C、D读写A中x的实现

如下是使用vuex，让A、B、C、D读写vuex中x的实现

2. vuex原理

• Vue Components: (相当于客人)
• Actions: 保存函数的(相当于服务员)
• Mutations: 保存函数的。一个函数引用State和接收参数x(相当于厨师)
• State: 保存数据的(相当于菜)
• Devtools: 开发者工具
• Vuex: Vuex里面的store管理Actions、Mutations、State

流程:

1. Vue Components组件和Vuex交互方式一：
   1. Vue Components组件调用Commit，执行Mutations中的指定function1，并传递参数值x
2. Vue Components组件和Vuex交互方式二：
   1. Vue Components组件调用Dispatch，执行Actions中的指定function1
   2. Backend API发送Ajax请求传递参数值x
   3. Actions中的function1，进行commit，执行Mutations中的指定function1，并传递参数值x
3. Mutations使用function1操作参数值x，改变State中对应的数据
4. State的数据发生变化，会自动重新渲染页面

3. vuex环境搭建

1. 安装vuex插件。vue2安装vuex3；vue3安装vuex4。所以使用cnpm install vuex@3进行安装

2. 新建scr/store/index.js。用于创建Vuex中最为核心的store。内容如下。

   • 需要调用Vue.use(Vuex)，这样才能在vm和vc上看到store
   • 将Vuex.Store统一暴露出去，store里面包含actions、mutations、state
   • js文件会优先执行import语句

import Vue from 'vue'
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 用于响应组件中的动作
const actions = {}
// 用于操作state
const mutations = {}
// 用于存储数据
const state = {}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

3. main.js引入store，并定义vm中并定义store

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false


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

console.log('vm', vm)

输出的vm如下，里面有store，便且vuex自动给store添加了很多属性

4. 求和案例

1. src/store/index.js。actions中实现了addOdd函数，可以接收传递过来的参数值value。actions中的函数可以调用commit，即调用mutations中的函数

import Vue from 'vue'
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 用于响应组件中的动作
const actions = {
    // context是store的上下文
    addOdd(context,value){
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    }
}
// 用于操作state
const mutations = {
    ADD(state,value){
        state.sum += value
    }
}
// 用于存储数据
const state = {
    sum:0
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

2. components/Count.vue如下：
   • 可以通过$store.state获取store的state中的数据sum
   • 可以调用this.$store.dispatch和this.$store.commit，调用store中actions和mutations中的函数，对store的state中的数据sum进行更新

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
		</select>
		<button @click="clickAdd">+</button>
		<button @click="clickAddWhenOdd">和为奇数时点我才会加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, // 加的步长
			}
		},
		methods: {
      clickAdd(){
				this.$store.commit('ADD',this.n)
			},
      clickAddWhenOdd(){
				this.$store.dispatch('addOdd',this.n)
			}
		}
	}
</script>

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

3. App.vue

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

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

4. main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false


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

5. 页面效果如下：