Vuex的使用实例分析
这篇文章主要介绍“Vuex的使用实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vuex的使用实例分析”文章能帮助大家解决问题。
创新互联公司长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为南昌企业提供专业的网站建设、成都网站制作,南昌网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
Vuex 简介
1. 概念
在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间的通信
2. 使用场景
多个组件依赖于同一状态
来自不同组件的行为需要变更同一状态
3. Vuex 工作原理
State 是存储的单一状态,是存储的基本数据(把改变的数据给到 Vue Components)
Getters 是 store 的计算属性,对 state 的加工,是派生出来的数据。就像 computed 计算属性一样,getter 返回的值会根据它的依赖被缓存起来,且只有当它的依赖值发生改变才会被重新计算
Actions 像一个装饰器,提交 mutation,而不是直接变更状态(actions 可以包含任何异步操作,如果有什么限制判断条件,也是在 actions 中进行操作)
Mutations 提交更改数据,使用 store.commit 方法更改 state 存储的状态(在 Mutations 不做任何判断等操作,只做数据的处理,如果不需要进行异步处理,可以直接把数据交到这里)
Module 是 store 分割的模块,每个模块拥有自己的 state、getters、mutations、actions
Vuex 提供了 mapState、MapGetters、MapActions、mapMutations 等辅助函数给开发在 vm 中处理的 store
这里有一个很好理解 Vuex 的方法:把 Vue Components 当作是去餐厅吃饭的顾客,Actions 就是餐厅的服务员,Mutations 是餐厅的后厨,State 是做好的菜,最后再展现给顾客。所以有什么需求找 Actions 说就可以了,Mutations 只负责做菜
4. 搭建 Vuex 环境
1)打开 VScode 的控制台,输入 npm i vuex 进行安装,也可以通过 Vuex 进行下载安装
2)创建一个 store 文件夹,且在该文件夹中创建一个 index.js 文件,文件中引入 import vuex from 'vuex',通过 Vue.use(Vuex) 就可以使用它了
3)在该 index.js 文件中配置 store,并配置暴露相关对象 export default new Vuex.Store({})
4)再在 main.js 文件中引入 store,import store from './store' (这里引入的其实是 store 文件夹下的 index.js 文件,因为默认找的就是文件夹的 index ,所以可以不写),在 Vue 实例对象中引用,即写上 store,这样组件实例对象和 vm 上就都能看到 store 了
下面我们用 vuex 来写一个案例:(最终的页面效果如下图所示)
前面进行选择每次要加的数,点击加号可往上加,点击减号也会对应的减,当当前求和的为奇数时,后一个按钮才有效,等一等再加,就是延迟 0.5 s 后再加
Count.vue 计算组件代码(实现页面的布局和调用方法)
当前求和为:{{$store.state.sum}}
export default {
name:'Count',
data(){
return {
n:1, //用户选择的数字
}
},
methods: {
increment(){
this.$store.commit('ADD',this.n)
//通过 commit 调用 Mutations 里面的 ADD 方法
},
decrement(){
this.$store.commit('DECREASE',this.n)
//通过 commit 调用 Mutations 里面的 DECREASE 方法
},
incrementOdd(){
this.$store.dispatch('addOdd',this.n)
// 通过 dispatch 调用 actions 里面的 addOdd 方法
},
incrementWait(){
this.$store.dispatch('addWait',this.n)
// 通过 dispatch 调用 actions 里面的 addWait 方法
},
},
}
button{
margin-left: 5px
}
组件中读取 vuex 中的数据:$store.state.sum
组件中修改 vuex 中的数据:$store.dispatch('actions中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
Store 文件夹中的 index.js 代码(用 vuex 配置相关的函数或方法)
//该文件用于创建 Vue 中最核心的 store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
// 应用 Vuex 插件
Vue.use(Vuex)
//准备 actions 用于响应组件中的动作
const actions = {
// 实现为奇数的时候才加操作
addOdd(context,value) {
if (context.state.sum % 2) {
context.commit('ADDODD',value)
}
},
// 实现等到 0.5 s 才加的操作
addWait(context, value) {
setTimeout(() => {
context.commit('ADDWAIT',value)
}, 500);
}
}
//准备 mutations 用于操作数据(state)
const mutations = {
//加操作
ADD(state,value) {
state.sum += value
},
//减操作
DECREASE(state, value) {
state.sum -= value
},
ADDODD(state, value) {
state.sum += value
},
ADDWAIT(state, value) {
state.sum += value
}
}
//准备 state 用于存储数据
const state = {
sum: 0 //当前的和
}
//创建并暴露 store
export default new Vuex.Store({
actions,
mutations,
state
})
其中 actions 对象中的每个方法都有一个 context 和 value 形参,context 里面存放着基本你要用的所有数据,value 就是你传进来的数据
其中 mutations 对象中的每个方法都有 state 和 value 形参,第一个里面存放有 state 中的数据,value 也是传进来的数据
App.vue
import Count from './components/Count.vue'
export default {
name: "App",
components: {
Count,
},
}
main.js
//引入 Vue
import Vue from 'vue'
//引入 App
import App from './App.vue'
//引入 store
import store from './store/index.js'
Vue.config.productionTip = false
const vm = new Vue({
render: h => h(App),
store, //使用 store
}).$mount('#app')
关于“Vuex的使用实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
当前题目:Vuex的使用实例分析
网址分享:http://scyanting.com/article/jjiiod.html