vue中Vuex详解

最新推荐文章于 2024-07-11 23:14:56 发布

白桦林的低语

最新推荐文章于 2024-07-11 23:14:56 发布

阅读量175

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/azyslwj/article/details/104296297

版权

本文详细探讨了Vuex在Vue.js应用程序中的核心概念和使用方式，包括状态管理、 mutations、actions、getters以及模块化。通过实例解析，展示了如何有效组织和维护大型Vue项目的状态，帮助开发者更好地理解和掌握Vuex的实战技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button type="button" id="submit" @click="subBtn()"></button>
		</div>
		
		<!-- Vuex 
			 渐进式框架：主张最少，没有强主张，可以将vue中的某些东西进行改动，实现自己所想要达到的效果，而不像react和angular框架，，对应使用者有较大的主张要求。
			 Vuex是一个专为vue.js应用程序开发的状态管理模式。
			 由于store中的状态是响应式的，在组件中调用 stroe 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的methods中提交mutation。
			 Vuex应用的核心就是一个store（仓库）。
			 Vuex的主要属性设置：
				state：
				getter:
				mutation:
				action:
				module:
		 -->
		 	 
		 <script type="text/javascript">
		 	
			new Vue({			
				// state
				data() {
					return {
						count: 0
					}
				},
				// view
				methods: {
					increment() {
						this.count++;
					}
				},
			})
			
		 </script>
		 
		 <!-- Vuex的使用 -->
		 <script type="text/javascript">
		 	//1.安装Vuex
			//2.引入
			import Vue from "vue";
			import Vuex from "vuex";
			// 引入数据辅助函数mapState
			import { mapState } from "vuex";
			// 引入mapGetters
			import { mapGetters } from "vuex";
			// 引入mapMutation
			import { mapMutation } from "vuex";
			// 引入方法辅助函数mapAction
			import { mapAction } from "vuex"

最低0.47元/天解锁文章

白桦林的低语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中Vuex详解

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <button type="button" id="submit...
复制链接

扫一扫

专栏目录