Vue从入门到精通

最新推荐文章于 2024-07-25 11:00:49 发布

阳光下的少年－熙

最新推荐文章于 2024-07-25 11:00:49 发布

阅读量113

点赞数 1

分类专栏：学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/m0_57246577/article/details/117110212

版权

学习同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

笔记

15 篇文章 0 订阅

订阅专栏

第六章状态管理

6.1.1 什么是Vuex?

Vuex 是Vue团队提供的一套组件状态管理维护的解决方案。Vuex作为Vue插件来使用，进一步完善了Vue基础代码功能，使Vue组件状态更加容易维护，为大型项目开发提供了强大的技术支持。

const store=new Vuex.Store({
    state:{},
    mutations:{}
})
var vm=new Vue({
    el:'#app',
    store
})

在上述代码中

第一行：用new创建Vuex实例对象store，它可以理解为一个容器，里面包含了应用中大部分的状态（state）；

第二行：通过state配置选项定义组件初始状态，类似于Vue实例中的data属性；

第三行：为实例对象提供了mutations,通过事件处理方法改变组件状态，最终将state状态放映到组件中，类似于Vue实例中的methods属性。

6.1.2 Vuex 的下载和安装

Vuex有两种安装方式：

①直接通过<script></script>标签引入vuex.js文件；

【例子】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入两个JavaScript文件 -->
		<script src="js/vue.js"></script>
		<script src="js/vuex.js"></script>
	</head>
	<body>
		<!-- HTML代码 -->
		<div class="app">
			<p>{{this.$store.state.name}}</p>
		</div>
		<!-- JavaScript代码 -->
		<script type="text/javascript">
			// 实例化store对象
			var store=new Vuex.Store({
				state:{
					name:'vuex.js直接引用'
				}
			})
			// 实例化Vue对象
			var vm=new Vue({
				el:'.app',
				store
			})
		</script>
	</body>
</html>

store 中的状态是响应式的，在组件中调用store中的状态时仅需要在计算属性中返回即可。下面的【例子】使用计算属性返回store中的name，age，gender，并使用 mapState 辅助函数来生成计算属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入两个JavaScript文件 -->
		<script src="js/vue.js"></script>
		<script src="js/vuex.js"></script>
	</head>
	<body>
		<!-- HTML代码 -->
		<div class="app">
			<p>{{name}},{{age}},{{gender}}</p>
		</div>
		<!-- JavaScript代码 -->
		<script type="text/javascript">
			// 实例化store对象
			var store=new Vuex.Store({
				state:{
					name:'Jerry',
					age:'25',
					gender:'男'
				}
			})
			// 实例化mappedState对象
			var mapState=Vuex.mapState
			// 实例化Vue对象
			var vm=new Vue({
				el:'.app',
				store,
				computed:mapState({
					name:state=>state.name,
					age:state=>state.age,
					gender:state=>state.gender
				})
			})
		</script>
	</body>
</html>

②在 npm 中安装。

使用 npm 导入 vuex 包。

【例子】

1> 使用命令切换到该项目的当前目录下，执行如下命令创建demo02项目
vue init webpack demo02
cd demo02

2>执行如下命令安装vuex
npm install vuex@3.1.1 --save

（后面的内容需要安装包，此处不多讲）

6.1.3 计数器案例

说明：每一个Vuex应用的核心就是store（仓库），即响应式容器，它用来定义应用中的数据以及数据处理工具。Vuex的状态存储就是响应式的，当store中数据状态发生变化，那么页面中的store数据也会发生相应变化。改变store中的状态的唯一途径就是显式地提交mutation ，这样可以方便跟踪每一个状态的变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器</title>
		<!-- 引入两个JavaScript文件 -->
		<script src="js/vue.js"></script>
		<script src="js/vuex.js"></script>
	</head>
	<body>
		<!-- HTML代码 -->
		<div class="app">
			<button @click="increase">+</button>
			<p>{{this.$store.state.count}}</p>
		</div>
		
		
		<!-- JavaScript代码 -->
		<script type="text/javascript">
			// 实例化store对象
			const store=new Vuex.Store({
				// 初始化state值
				state:{
					count:0
				},
				// 修改count值
				mutations:{
					increase(state){
						state.count++
					}
				}
			})
			// 实例化Vue对象
			var vm=new Vue({
				el:'.app',
				store,
				methods:{
					increase(){
						//this.$store.commit('increase')	//后台有相应的内容显示
						this.$store.state.count++     //后台没有相应的内容显示
					}
				}
			})
		</script>
	</body>
</html>

6.1.4 Vuex 状态管理模式

vue中的单向数据流机制,在vue中,组件的状态变化是通过vue单向数据流的设计理念实现的。

new Vue({
    data(){
        return {count:0}
    },
    template:'<div>{{count}}</div>',
    methods:{
        increment(){
            this.count++
        }
    }
})

vue中的单向数据流主要包括3个部分：

1.state：驱动应用的数据源

2.view：以声明方式将state映射到视图

3.actions：响应在view上的用户输入导致的状态变化

【注意】vue的单向数据流增强了组件之间的独立性，但是存在多个组件共享状态的时候，单向数据流状态就会破坏，因此，为了数据维护更加方面，需要将组件共享状态抽离出来，用全局的单例模式来管理，在这种模式下，任何组件都能获取状态或触发行为，这就是所谓的vuex数据状态管理，vuex是专门为vue设计的状态管理库，以利用vue的细粒度数据响应机制来进行高效的状态更新。

阳光下的少年－熙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue从入门到精通

6.1.1 什么是Vuex?Vuex 是Vue团队提供的一套组件状态管理维护的解决方案。Vuex作为Vue插件来使用，进一步完善了Vue基础代码功能，使Vue组件状态更加容易维护，为大型项目开发提供了强大的技术支持。const store=new Vuex.Store({ state:{}, mutations:{}})var vm=new Vue({ el:'#app', store})在上述代码中第一行：用new创建Vuex实例对象store，它可
复制链接

扫一扫