@
- 1.概念
- 2.何时使用？
- 3.搭建vuex环境
- 3.1 创建文件:
src/store/index.js - 3.2 在
main.js中创建vm时传入store配置项 - 4.基本使用
- 4.1、初始化数据、配置
actions、配置mutations，操作文件store.js - 4.2、组件中读取vuex中的数据：
$store.state.sum - 4.3、 组件中修改vuex中的数据
- 5、实际应用
- 5.1 项目结构
- 5.2 store/index.js
- 5.3 components/Count.vue
- 5.4 App.vue
- 5.6 main.js
- 6、实战测试效果
- 6.1 视频效果
- 6.2 原理图解（代码走向）
- 6.3 提示注意
辅助理解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
3.2 在 main.js 中创建vm时传入 store 配置项
//引入store
import store from './store'
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
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,
})
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
5.3 components/Count.vue
当前求和为:{{ $store.state.sum }}
1
2
3
+
-
当前求和为奇数再加
等一等再加
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)
},
},
};
button {
margin-left: 5px;
}
5.4 App.vue
import Count from './components/Count'
export default {
name:'App',
components:{Count},
}
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
}
})
6、实战测试效果
6.1 视频效果
[video(video-hJjausRG-1662043616977)(type-csdn)(url-https://live.csdn.net/v/embed/236077)(image-https://video-community.csdnimg.cn/vod-84deb4/88cc32c2509c40ce8879a9fb074824dd/snapshots/f0779060781c49858d2222148b714ec5-00003.jpg?auth_key=4815643083-0-0-743d2b21cb5e7a8171735f62f6e37491)(title-vuex)]
6.2 原理图解（代码走向）
6.3 提示注意
- 1、点击加号、纯粹的进行加操作，可以直接跳过
dispatch,直接调用commit - 2、点击减号、和加法类似
- 3、当累加和为奇数、可以继续添加。这个时候就要在
Actions中进行逻辑判断、根据判断的结果在调用commit - 4、定时器也可以直接写在
Actions中
Original: https://www.cnblogs.com/zheng-yuzhu/p/16649113.html
Author: 郑-某
Title: Vue学习之——–深入理解Vuex、原理详解、实战应用（2022/9/1）
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/610233/
转载文章受原作者版权保护。转载请注明原作者出处！