太原论坛建站模板,网站建设的总体设计概图,wordpress百度搜索,推广专家Vuex#xff08;五#xff09;Vuex一、什么是Vuex二、Vuex工作原理三、搭建Vuex环境四、求和案例分析4.1 求和案例——vue实现4.2 求和案例——vuex实现#xff08;五#xff09;Vuex
一、什么是Vuex
1.概念
在Vue中实现集中式状态#xff08;数据#xff09;管理的一…
Vuex五Vuex一、什么是Vuex二、Vuex工作原理三、搭建Vuex环境四、求和案例分析4.1 求和案例——vue实现4.2 求和案例——vuex实现五Vuex
一、什么是Vuex
1.概念
在Vue中实现集中式状态数据管理的一个Vue插件对vue应用中多个组件的共享状态进行集中式的管理(读/写)也是一种组件间通信的方式且适用于任意组件间通信。
在多组件中要共享数据 x是由全局事件总线实现的这样做会很麻烦每个组件之间都要进行全局事件绑定如下图所示 但是如果使用Vuex实现就需要把 x 提取到vuex中所有组件就都可以使用如下图所示 Github 地址: https://github.com/vuejs/vuex
2.什么时候使用 Vuex
多个组件依赖于同一状态来自不同组件的行为需要变更同一状态。
二、Vuex工作原理 Vuex有三个重要的组成部分
actions行为发送ajax请求mutations加工state状态数据所在处
将数据写入state中后由vc实例对象调用dispatch()方法然后就会引起actions中对应函数的调用之后再其中调用commit()方法然后就会引起mutations中对应函数的调用这个函数中就有state和所传参数然后自动就会继续mutate改变state中的数据最后就会重新解析渲染。 如果出现需要其他服务器传入参数就需要在actions中进行发送Ajax请求但是如果对于参数已知可以直接跳过actions通过直接调用commit()方法到mutations。
Vuex中三个重要的组成部分的类型都是对象它们都是在store下面进行管理的也就是说dispatch()方法、commit()方法都是store提供的。
1state vuex 管理的状态对象 它应该是唯一的 示例代码
2actions 值为一个对象包含多个响应用户动作的回调函数 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state 如何触发 actions 中的回调 在组件中使用 $store.dispatch(对应的 action 回调名) 触发 可以包含异步代码定时器, ajax 等等 示例代码
3mutations 值是一个对象包含多个直接更新 state 的方法 谁能调用 mutations 中的方法如何调用 在 action 中使用commit(对应的 mutations 方法名)触发 mutations 中方法的特点不能写异步代码、只能单纯的操作 state 示例代码
三、搭建Vuex环境
1.安装vuex
由于在2022年2月7日vue3称为了默认版本如果执行npm i vue就会直接安装为vue3的了vue3的默认版本是vuex4vue2的默认版本是vuex3如果在vue2项目中安装vuex4版本就会报错 所以vue2中要用vuex的3版本vue3中要用vuex的4版本。
指定版本安装 npm i vuex3
2.使用步骤
1创建文件src/store/index.js该文件用于创建Vuex中最为核心的store
//引入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
)}2在main.js中创建vm时传入store配置项。
......
//引入store
import store from ./store
......//创建vm
new Vue({el:#app,render: h 》h(App)store
})注意vue脚手架在执行的时候会扫描整个文件然后将所有的import语句先执行所以就需要在src/store/index.js文件中引用并使用Vuex。
搭建完毕后在vc中就会出现store 四、求和案例分析
4.1 求和案例——vue实现
Count.vue文件
这里注意在绑定数据的适合为了传入的数据是数字number不是字符串String这里可以使用 v-model.number绑定或者在value前面加冒号::value1
templatedivh1当前求和为{{sum}}/h1select v-modeln!-- v-model.numbern --option :value11/optionoption :value22/optionoption :value33/option/selectbutton clickincrement/buttonbutton clickdecrement-/buttonbutton clickincrementOdd当前求和为奇数再加/buttonbutton clickincrementWait等一等再加/button/div
/templatescriptexport 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)},}}
/scriptstylebutton{margin-left: 5px;}
/styleApp.vue文件中
templatedivCount//div
/templatescript//引入组件import Count from ./components/Count.vueexport default {name:App,components:{Count},
}
/script页面显示结果 4.2 求和案例——vuex实现
Count.vue文件
templatedivh1当前求和为{{$store.state.sum}}/h1select v-modeln!-- v-model.numbern --option :value11/optionoption :value22/optionoption :value33/option/selectbutton clickincrement/buttonbutton clickdecrement-/buttonbutton clickincrementOdd当前求和为奇数再加/buttonbutton clickincrementWait等一等再加/button/div
/templatescriptexport default {name:Count,data() {return {n:1, //用户选择的数字}},methods:{//前面两个函数中什么添加也没有所以可以直接通过commit写在mutations中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)},}}
/scriptstylebutton{margin-left: 5px;}
/styleApp.vue文件中
templatedivCount//div
/templatescript//引入组件import Count from ./components/Count.vueexport default {name:App,components:{Count},
}
/scriptmain.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,render: h h(App),store,beforeCreate() {Vue.prototype.$bus this},
})src/store/index.js文件中
//该文件用于创建Vuex中最为核心的store//引入Vue核心库
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex)//准备actions对象一响应组件中用户的动作
const actions {// //前面两个函数中什么添加也没有所以可以直接通过commit写在mutations中// jia(context, value) {// console.log(actions中的jia被调用了)// context.commit(JIA,value)// },// jian(context, value) {// console.log(actions中的jian被调用了)// context.commit(JIAN,value)// },//后面两个函数中都添加了条件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对象一保存具体的数据
const state {sum:0 //当前的和
}//创建并暴露store
export default new Vuex.Store({actions, mutations,state
})页面显示结果
