Vuex基本使用

最新推荐文章于 2024-03-22 12:19:16 发布
最新推荐文章于 2024-03-22 12:19:16 发布
阅读量1k 收藏 6
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lx00000025/article/details/131794024
版权

目录

一、什么是vuex

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

二、什么时候使用 Vuex

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

三、Vuex 工作原理图

在这里插入图片描述

四、vuex 核心概念和 API

4.1 state

  1. vuex 管理的状态对象
  2. 它应该是唯一的
    //准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

4.2 actions

  1. 值为一个对象，包含多个响应用户动作的回调函数
  2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新state
  3. 如何触发 actions 中的回调？
    在组件中使用: $store.dispatch('对应的 action 回调名') 触发
  4. 可以包含异步代码（定时器, ajax 等等）
    //准备actions——用于响应组件中的动作
const actions = {
	jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	}
}

4.3 mutations

  1. 值是一个对象，包含多个直接更新 state 的方法
  2. 谁能调用 mutations 中的方法？如何调用？
    在 action 中使用：commit('对应的 mutations 方法名') 触发
  3. mutations 中方法的特点：不能写异步代码、只能单纯的操作state
    //准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	}
}

4.4 getters

  1. 值为一个对象，包含多个用于返回数据的函数
  2. 如何使用？—— $store.getters.xxx
  3. 示例代码：
    //准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

五、代码生成器

5.1 mapGetters

    computed:{
        //自己实现
        // bigSum(){
        //     return this.$store.getters.bigSum
        // },
        //使用Vuex的mapGetters生成和getters相关的代码,从getters中读取数据
        ...mapGetters({bigSum:'bigSum'})
    },

5.2 mapState

    computed:{
        //自己实现代码
        // sum(){
        //     return this.$store.state.sum  
        // },
        // school(){
        //     return this.$store.state.school
        // },
        // subject(){
        //     return this.$store.state.subject
        // },
        //使用Vuex的mapState生成和state相关的代码,...代表把mapState中的方法或者属性放到computed中
        //对象写法
        // ...mapState({sum:'sum',school:'school',subject:'subject'}),
        //数组写法
        ...mapState(['sum','school','subject']),
    }

5.3 mapActions

    methods: {
    	//自己实现
        // incrementOdd(){
        //     this.$store.dispatch('jiaOdd',this.n)

        // },
        // incrementWait(){
        //     this.$store.dispatch('jiaWait',this.n) 
        // }
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
        // ...mapActions(['jiaOdd','jiaWait'])
    },

5.4 mapMutations

methods: {
		//自己实现
        // increment(){
        //     //如果没有什么业务逻辑可以直接commit
        //     this.$store.commit('JIA',this.n)
        // },
        // decrement(){
        //     //如果没有什么业务逻辑可以直接commit
        //     this.$store.commit('JIAN',this.n)
        // },
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
        // ...mapMutations(['JIA','JIAN']),
     
    }

六、vuex模块化编码

在实际开发中我们的业务会分为很多种，如果把不同业务的功能都写在一个文件里的话就会很不好维护，所以我们可以把每个业务单独形成一个模块。
例如：现在有一个count和person模块

count.js

//求和相关配置
export default {
    //开启命名空间，默认为false
    namespaced:true,
    actions:{
        jiaOdd(context,value){
            if (context.state.sum%2) {
                context.commit('JIA',value)
            }
        },
        jiaWait(context,value){
            setTimeout(()=>{
                context.commit('JIA',value)
            },500)    
        }
    },
    mutations:{
        JIA(state,value){
            state.sum+=value
        },
        JIAN(state,value){
            state.sum-=value
        },
    },
    state:{
        sum:0,//当前的和
        school:'b站大学',
        subject:"vue",
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

person.js

import axios from "axios"
import { nanoid } from "nanoid"
//人员管理相关配置
export default {
    //开启命名空间，默认为false
    namespaced:true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf('王')===0){
                context.commit('ADD_PERSON',value)
            }else{
                alert('添加的人必须姓王！')
            }
        },
        //从服务器获取数据
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response=>{
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error=>{
                    console.log(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            if(value.name === ''){
                alert("不能为空！")
            }else{
                state.personList.unshift(value)
            }
        }
    },
    state:{
        personList:[
            {id:'001',name:'张三'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }

合并业务:将count和person配置到Vuex.Store
index.js

//该文件用于常见Vuex中最为核心的store

//引入Vuex
import Vuex from 'vuex'
//引入Vue
import Vue from 'vue'

import countOptions from './count'
import personOptions from './person'
Vue.use(Vuex)

//创建store，并对外暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

main.js

import Vue from "vue"
import App from "./App.vue"
//引入store
import store from './store/index'
//引入插件
import VueResource from "vue-resource";
Vue.config.productionTip=false;
//使用插件
Vue.use(VueResource)

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

七、求和案例

目录结构：
在这里插入图片描述

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 lang="css">
	button{
		margin-left: 5px;
	}
</style>

index.js

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

//准备actions——用于响应组件中的动作
const actions = {
	/* 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,
})

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>

main.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
	}
})
蓝朽
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
浅谈vuex之mutation和action的基本使用
08-29
本篇文章主要介绍了浅谈vuex之mutation和action的基本使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex的基本介绍和使用—-逆战班
01-20
1. vuex作用: 1.1 是一个专为 vue.js 应用程序开发的状态管理模式，集中式存储管理应用的所有组件的状态，以此实现非父子甚至不同组件之间的高效通信 1.2 缓存后端数据，提高用户体验 2. 什么时候vuex比较适用？ 如果构建一个中大型单页应用，考虑到如何更好地在组件外部管理状态，vuex 就成为了自然而然的选择。但是如果您的应用够简单，不打算开发大型单页应用的话，最好还是不要使用 vuex，因为这时候使用 vuex 可能是繁琐冗余的。 3. vuex原理: vuex的状态管理分为同步状态和异步状态，都是在单向数据流理念下通过vue 的官方调试工具 devtools exten
【Vuex】Vuex详解，一篇文章搞懂Vuex详细使用过程和代码编写
最新发布
qq_63586399的博客
03-22 727
实现组件全局（数据）管理的一种机制，可以方便的实现组件之间共享数据，不同于上述三种传递值的方式。可以把vuex当成一个store仓库，可以集中管理共享的数据，并且存储在vuex中的数据都是响应式的，数据与页面同步。一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中。
【Vue】高级系列（十）vuex - 状态自管理应用 - state - view - actions
YK菌的博客
02-26 2185
学习Vuex
Vuex 的基本用法
一名努力学习前端的大三学生
03-06 5061
一、Vuex 概述 1.1 传统的组件之间的共享数据方式 父向子传值： v-bind 子向父传值：v-on 兄弟组件之间共享数据：EvenBus $on 接受数据的那个组件 $emit 发送数据的那个组件 缺点：只能通过父传子 和 子传父的方式传值，若想要两个毫无关系的组件传值则很繁琐（需要找到 他们之间的关系） 1.2 Vuex是什么 vuex 是实现组件全局状态管理的一种机制，可以方便组件之间的数据共享 二、Vuex初始化 store.js import Vue fro
Vuex怎么使用？来看看吧~
m0_67094505的博客
09-18 5727
sate.js 存储变量Getters.js 获取变量值、mutations.js 改变变量值（同步）actions.js 改变变量值（异步）
Vuex的全面用法总结
shi15926lei的博客
07-20 4339
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。Vuex 是什么？| Vuex。
Vuex的用法
JohnJill的博客
02-25 2265
Vuex用法学习
Vuex的使用
nunumaymax的博客
06-09 3681
Vuex是 Vue 的共享状态管理，小型项目使用 store模式 即可，中大型项目需要使用 VueX。mapState, mapGetters ：写在computed中；mapMutations, mapActions ：写在methods中。state: 变量；getters: state的计算属性；mutations: 同步；actions: 异步。state: 如果在模块中定义，则为局部的state；getters: 如果在模块中定义，则为局部的getters；
VueX的详细使用讲解
zayyo的博客
11-15 4116
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能 State：就是我们的状态，类似data中的属性 View：视图层，可以针对State的变化，显示不同的信息 Actions：这里的Actions主要是
Vuex
weixin_38170065的博客
09-06 514
1. vue中各个组件之间传值 1.父子组件 父组件-->子组件，通过子组件的自定义属性：props 子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...); 2.非父子组件或父子组件 通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...) 3.非父子组件或父子组件 更好的方式是在...
vuex的基本构造逻辑图
02-09
vuex的基本构造逻辑图
浅谈vuex的基本用法和mapaction传值问题
10-16
今天小编就为大家分享一篇浅谈vuex的基本用法和mapaction传值问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一步教你怎么使用Vuex
weixin_67465673的博客
09-17 3244
官网的图解 Vuex： 了解后图解Vuex各组件 ： 获取值 this.$store.state.变量值 获取值 this.$store.gettres.变量的get方法 改变值 this.$store.commit("同步的方法"，{...}) 改变值 this.$store.dispath("异步的方法"，{..
vuex的基本使用
weixin_52087266的博客
07-03 242
vuex 基本使用
VueX使用
m0_60505147的博客
10-31 4590
state: {},// 定义mutations}})
手把手教你使用Vuex，猴子都能看懂的教程
niu18338700287的博客
06-28 3873
带你了解一下vuex，看来这篇文章相信你会更加清楚vuex
Vue3从入门到实战 vuex基本使用
05-21
Vue3是目前最新的Vue.js版本，相比Vue2有很多新特性和更好的性能。而Vuex是Vue.js官方推荐的状态管理工具，用于处理复杂的应用程序中的共享状态。 下面是Vue3和Vuex的基本使用方法： 1. 在项目中安装Vue3和Vuex： ```bash npm install vue@next vuex@next --save ``` 2. 创建一个store.js文件用于配置Vuex： ```javascript import { createStore } from 'vuex' const store = createStore({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { increment(context) { context.commit('increment') } }, getters: { getCount(state) { return state.count } } }) export default store ``` 这里我们定义了一个state对象来存储应用程序的状态，一个mutation函数来改变状态，一个action函数来分发mutation，一个getter函数来获取状态。 3. 在main.js中引入store： ```javascript import { createApp } from 'vue' import App from './App.vue' import store from './store' createApp(App).use(store).mount('#app') ``` 4. 在组件中使用Vuex： ```html <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { mapGetters, mapActions } from 'vuex' export default { computed: { ...mapGetters(['getCount']), count() { return this.getCount } }, methods: { ...mapActions(['increment']) } } </script> ``` 这里我们使用了Vuex提供的mapGetters和mapActions函数来映射state中的count属性和increment函数到组件中。 以上就是Vue3和Vuex的基本使用方法，可以根据自己的需求进行扩展和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝朽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值