Vue入门七（Vuex的使用｜Vue-router｜LocalStorage与SessionStorage和cookie的使用）

0Jchen2024-01-16 17:17

文章目录

一、Vuex

1）理解vuex

Vuex是一个专为Vue.js应用程序开发的状态管理系统+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

解读

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

2）优点

Vuex状态管理跟使用传统全局变量的不同之处：

  • Vuex的状态存储是响应式的： 就是当你的组件使用到了这个 Vuex

    的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

  • 不能直接修改Vuex的状态： 如果是个全局对象变量，要修改很容易，但是在 Vuex 中不能这样做，想修改就得使用 Vuex。提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

3）何时使用？

当你无法很好的进行数据管理的时候，多个组件需要共享数据时，你就需要用Vuex，即：

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

Vuex 背后的基本思想.

进行注解

4）使用步骤

因为我是通过命令创建vue项目的，当时已经选配好了，所以下面前四个步骤都不用自己配置
与router一样，当我们在项目中使用vuex之后，为了方便代码维护，我们一般需要做特殊的目录调整，约定的结构如下：

python 复制代码 
	根组件
	└── src
	    ├── main.js
	    ├── router
	    │   └── index.js   # 路由
	    └── store
	        └── index.js   # vuex

① 安装vuex

python 复制代码 
	npm install vuex --save

② 创建vuex

在src文件夹下新建store/index.js，并初始化下列代码

python 复制代码 
	import Vue from 'vue'  		//引入Vue核心库
	import Vuex from 'vuex'		//引入Vuex
	Vue.use(Vuex)				//应用Vuex插件

③ 导入vuex

在main.js中导入

python 复制代码 
	import Vue from 'vue'
	import App from './App.vue'
	import store from './store'  //导入
	
	Vue.config.productionTip = false
	
	new Vue({
	  store,  //挂载
	  render: h => h(App)
	}).$mount('#app')

④ 创建仓库Store

要使用 Vuex，我们要创建一个实例 store，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。

python 复制代码 
	//创建一个 store
	export default new Vuex.Store({
		state:{
		   //存放状态
		},
		getters:{
		  //state的计算属性
		},
		mutations: {
		 //更改state中状态的逻辑，同步操作
		},
		actions: {
		  //提交mutation,异步操作
		},
		//如果将store分成一个个的模块的话，则需要用到modules.
		//然后在每一个module中的state,getters，mutations,actions等
		modules: {
		 a: moduleA,
		 b: moduleB,
		 //...
		}
	})

⑤ 基本使用

修改state中的年龄

store/index.js

python 复制代码 
	import Vue from 'vue'
	import Vuex from 'vuex'  //安装过直接导入
	
	Vue.use(Vuex)  //使用vuex插件
	export default new Vuex.Store({
	  state: {
	    age:18,
	  },
	  mutations: {
	    addAgeMutation(state){
	        state.age++
	    }
	  },
	  actions: {
	    addAgeAction(context){
	    	console.log(context)  //第一个采纳数传入context，内部有commit和dispatch
	        context.commit('addAgeMutation') //调用commit会触发mutations中函数的执行
	    }						//封装性很强，这里可以做出判断，是否有权限改值，如果有权限就通过
	  },
	})

组件中使用修改

python 复制代码 
	<script>
	export default {
	  name: 'StatesView',
	  created() {
	    console.log(this.$store.state.age)
	  },
	  methods: {
	    handleClick() {
	      //this.$store.state.age++   可以直接修改但是不建议这样使用
	      this.$store.dispatch('addAgeAction') //按照流程 触发Vuex中的actions得函数执行 使用dispatch
	    }
	  },
	
	}
	</script>
	
	<template>
	  <div>
	    <h1>vuex的基本使用</h1>
	    <hr>
	    <h3>vuex中的age---------》{{ $store.state.age }}</h3>
	    <button @click="handleClick">点击修改vuex中的age属性+1</button>
	  </div>
	</template>

5）五个模块介绍

  • State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
  • Getter：允许组件从 store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter映射到局部计算属性（state的计算属性）。
  • Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
  • Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
  • Module：可以将 store 分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块(将store模块化）

1.State

概念：State 本质上就是 Object 对象

state的作用是：保存公共数据（多组件中共用的数据）

state是响应式的： 如果修改了数据，相应的在视图上的值也会变化。

组件访问 State 数据

在每个 Vue 组件中，可以通过 this.$store.state全局数据名称 访问 Store 中的数据。

定义公共数据格式

python 复制代码 
	export default new Vuex.Store({
	  state: {
	    属性名:属性值,
	  },
	})

使用公共数据

python 复制代码 
	在组件中，通过this.$store.state.属性名来访问。
	在模板标签中，则可以省略this而直接写成： {{$store.state.属性名}}

2.mutations

Mutation 本质上是JavaScript 函数，专门用来变更Store 中的数据

  • 特点：想要修改State 中的数据，只能调用Mutation 方法，它是Vuex中用来修改公共数据的唯一入口。
  • 好处：能够确保修改来源的唯一性，方便调试和后期维护。
  • 在定义时：它的第一个参数是state，第二个参数是载荷
  • 在调用时：用this.$store.commit('mutation名'， 载荷)来调用
  • 注意：Mutation 必须是同步函数，Mutation 里面不能放异步代码

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

在vuex中定义：

其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一

python 复制代码 
	'注意：mutation必须是同步函数，不能是异步的，这是为了后期调试的方便。'
	export default new Vuex.Store({
	  state: {
	    count:0,
	  },
	  //里面定义方法，操作state方法
	  mutations: {
	  	//第一个参数是必须的，表示当前的state。在使用时不需要传入
		//第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据
	    addCount(state,num){
	    	state.count+=(state.count+num)
	    },
	    reduce(state){
			state.count--
		}
	  },
	})

在组件中使用

定义两个按钮进行加减操作，组件中使用格式：this.$store.commit('mutation名', 实参)第二个参数可选的

python 复制代码 
<script>
export default {
  name: 'StatesView',
  methods: {
    btnAdd(){
      //注意：使用commit触发Mutation操作
      this.$store.commit('addCount',10)  //每次加10
      console.log('执行了mutations给count+10了')
    },
    btnDel(){
      console.log('执行了mutations给count-1了')
      this.$store.commit('reduce')
    }
  }
 }

}
</script>

<template>
  <div>
    <p>store中count数据值：{{$store.state.count}}</p>
    <p><button @click="btnAdd">点击增加store中count数据值+10</button></p>
    <p><button @click="btnDel">点击减少store中count数据值-1</button></p>
  </div>
</template>

3.actions

Action 本质上是 JavaScript 函数，专门用来处理 Vuex 中的异步操作

  • actions是vuex的一个配置项
  • 作用：发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部
  • 要点：
    • action 内部可以发异步请求操作
    • action是间接修改state的：是通过调用 mutation来修改state

因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么action中提交mutation,然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数。

在vuex中定义：

将上面的减法操作改为异步操作

python 复制代码 
	export default new Vuex.Store({
	    state: {
	        count: 0,
	    },
	    mutations: {
	        addCount(state, num) {
	            state.count += (state.count + num)
	        },
	        reduce(state) {
	            state.count--
	        }
	    },
	    actions: {
	    	//action函数接受一个context函数，这个context具有与store实例相同的方法和属性
	        // context对象会自动传入，它与store实例具有相同的方法和属性
	        // 1. 异步操作
	        // 2. commit调用mutation来修改数据
	        asyncReduce(context){
	            setTimeout(()=>{
	                context.commit('reduce')
	            },2000)
	        }
	        //格式： context.commit('mutation名', 载荷)
	
	    },
	})

在组件中使用：

python 复制代码 
	<script>
	export default {
	  name: 'StatesView',
	  methods: {
	    btnAdd(){
	      //注意：使用commit触发Mutation操作
	      this.$store.commit('addCount',10)  //每次加10
	      console.log('执行了mutations给count+10了')
	    },
	    btnDel(){
		//直接使用：在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action
	      console.log('执行了actions的异步操作--等待2秒执行了')
	      this.$store.dispatch('asyncReduce')
	    }
	  },
	}
	</script>
	
	<template>
	  <div>
	    <p>store中count数据值：{{$store.state.count}}</p>
	    <p><button @click="btnAdd">点击增加store中count数据值+10</button></p>
	    <p><button @click="btnDel">点击减少store中count数据值-1</button></p>
	  </div>
	</template>

小结

action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据


将ajax请求放在actions中有两个好处：

  • 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
  • 逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中。

4.Getter

类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

具体操作类似于前几种，这里不做具体说明

5.Modules

当遇见大型项目时，数据量大，store就会显得很臃肿

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块------从上至下进行同样方式的分割

二、Vue-router

三、LocalStorage与SessionStorage、cookie的使用

python 复制代码 
	浏览器可以存数据
		1.cookie中：有过期时间，一旦过期，就会清理掉
		2.localStorage中：永久有效，即便浏览器重启也有效，只能手动或代码删除
		3.sessionStorage中：当次有效，关闭浏览器，就清理掉了
python 复制代码 
	<template>
	  <div>
	    <h1>localStorage的使用</h1>
	    <button @click="saveLocalStorage">写入数据</button>&nbsp;&nbsp;
	    <button @click="getLocalStorage">获取数据</button>&nbsp;&nbsp;
	    <button @click="delLocalStorage">删除数据</button>
	    <hr>
	    
	    <h1>sessionStorage的使用</h1>
	    <button @click="saveSessionStorage">写入数据</button>&nbsp;&nbsp;
	    <button @click="getSessionStorage">获取数据</button>&nbsp;&nbsp;
	    <button @click="delSessionStorage">删除数据</button>
	    <hr>
	    
	    <h1>cookies的使用---使用第三方vue-cookies</h1>
	    '需先安装cnpm install vue-cookies -S'
	    <button @click="saveCookie">写入数据</button>&nbsp;&nbsp;
	    <button @click="getCookie">获取数据</button>&nbsp;&nbsp;
	    <button @click="delCookie">删除数据</button>
	    <hr>
	  </div>
	</template>

	<script>
		import cookie from 'vue-cookies'  //cookies需要安装第三方，导入后使用
		export default {
		  name:'IndexView',
		  methods:{
		    saveLocalStorage(){
		      localStorage.setItem('name','xxx')
		    },
		    getLocalStorage(){
		      console.log(localStorage.getItem('name'))
		    },
		    delLocalStorage(){
		      //localStorage.clear() //清空所有的localStorage数据
		      localStorage.removeItem('name') //指定清除
		    },
		    
		    saveSessionStorage(){
		      sessionStorage.setItem('name','xxx')
		    },
		    getSessionStorage(){
		      console.log(sessionStorage.getItem('name'))
		    },
		    delSessionStorage(){
		      sessionStorage.removeItem('name') //同localStorage一样指定清除
		    },
		    
		    saveCookie(){
		      cookie.set('name','xxx','7d')  //按天算
		    },
		    getCookie(){
		      console.log(cookie.get('name'))
		    },
		    delCookie(){
		      cookie.remove('name')
		    },
		  }
		}
	</script>
相关推荐
过期的H2O215 分钟前
【H2O2|全栈】关于CSS（4）CSS基础（四）
前端·css
纳尼亚awsl29 分钟前
无限滚动组件封装(vue+vant)
前端·javascript·vue.js
八了个戒34 分钟前
【TypeScript入坑】TypeScript 的复杂类型「Interface 接口、class类、Enum枚举、Generics泛型、类型断言」
开发语言·前端·javascript·面试·typescript
西瓜本瓜@36 分钟前
React + React Image支持图像的各种转换，如圆形、模糊等效果吗？
前端·react.js·前端框架
黄毛火烧雪下37 分钟前
React 的 useEffect 钩子，执行一些异步操作来加载基本信息
前端·chrome·react.js
蓝莓味柯基43 分钟前
React——点击事件函数调用问题
前端·javascript·react.js
资深前端之路44 分钟前
react jsx
前端·react.js·前端框架
cc蒲公英1 小时前
vue2中使用vue-office库预览pdf /docx/excel文件
前端·vue.js
一嘴一个橘子1 小时前
js 将二进制文件流，下载为excel文件
javascript
Sam90291 小时前
【Webpack--013】SourceMap源码映射设置
前端·webpack·node.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04软件工程从理论到实践客观题汇总(头歌第一章至第八章)05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CCF-CSP认证考试 202406-3 文本分词 100分题解08yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10实战 | 基于YOLOv9和OpenCV实现车辆跟踪计数（步骤 + 源码）