Vuex的使用看这一篇就够了

最新推荐文章于 2024-09-23 16:36:59 发布
最新推荐文章于 2024-09-23 16:36:59 发布
阅读量909 收藏 25
点赞数 14
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clmm_/article/details/142345088
版权

Vuex概述

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

state状态

把公用的数据放到store里的state就行了，上面是vue2的代码，下面是vue3

import { createStore } from 'vuex'

export default createStore({
  state: {
    counter:0,
    title:'标题'
  },
  getters: {

  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },

})

访问state里的数据

有两种方法，

1.通过store直接访问

2.通过辅助函数

通过store直接访问

注意，在模板，组件，js模块中的写法是不一样的

这里又可以分成两种方法，二者效果一样

直接用$store.state

<template>
  <nav>
    <p>counter:{{$store.state.counter}}</p>
    <p>{{$store.state.title}}</p>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<script>
export default {
  created() {
    console.log(this.$store)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

写个计算属性

补充computed知识点

在 computed 属性中定义的 storeCount 方法被视为一个计算属性，Vue 会自动追踪其依赖。当 this.$store.state.count 的值变化时，storeCount 也会随之更新，从而实现响应式更新。这使得你能够在模板中直接使用 storeCount，而不需要手动管理状态的变化。

简而言之，这种方式利用了 Vue 的响应式特性，确保了数据的同步和更新。

<template>
  <nav>
    <p>counter:{{counter}}</p>
    <p>{{$store.state.title}}</p>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<script>
export default {
  computed:{
    counter(){
      return this.$store.state.counter
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

通过辅助函数mapState访问

可以看到上面的方法其实有点麻烦，因为如果要多次访问的话，代码量大，看起来也不整洁。

用法：

详细解释

  1. 导入 mapState：

     
    javascriptCopy Code
     import { mapState } from 'vuex';  
    通过导入 mapState，你可以在组件中使用这个函数。
     
  2.  
    使用 mapState：
     
    javascriptCopy Code
     computed: { ...mapState(['count']) // 直接映射 state 中的 count }  
   
    • mapState 接受一个字符串数组作为参数，这些字符串是 Vuex store 中 state 的属性名。
    • 这里的 ['count'] 表示你要将 Vuex store 中的 count 状态映射到当前组件的计算属性中。
  3.  
    展开运算符 ...：
     
   
    • ... 是 ES6 的扩展运算符，它会将 mapState 返回的对象中的属性展开到 computed 中。
    • 这意味着 mapState(['count']) 会返回一个对象，例如 { count() { return this.$store.state.count; } }，而展开运算符会将这个对象中的 count 方法直接添加到 computed 中。
  4.  
    结果：
     
   
    • 最终，组件中就可以通过 {{ count }} 来直接使用 Vuex store 中的 count 状态了。由于计算属性的响应式特性，当 Vuex 中的 count 发生变化时，组件会自动重新渲染。
 

 

 

 

试一下
 

<template>
  <nav>
    <p>{{ counter }}</p>
    <p>{{ title }}</p>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['counter','title'])
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 

 

 

 

 

 

 

 

 

 

修改store里的数据
 

 

Mutations介绍
 

通过mutations可以提供修改数据的方法
 

 

 

注意！mutation的第一个参数都是state。而且最多只能有两个参数，如果想实现多个参数，那第二个参数就要包装成对象
 

 

在store中定义 Mutation
 

import { createStore } from 'vuex'

export default createStore({
  state: {
    count:0,
    title:'标题'
  },
  getters: {

  },
  mutations: {
    add(state,n){
      state.count+=n
    }
  },
  actions: {
  },
  modules: {
  },

})

 

 

 

要调用 mutation，需要使用 store.commit 方法
 

<template>
  <nav>
    <p>{{ count }}</p>
    <p>{{ title }}</p>
    <button @click="add">增加</button>
  </nav>
<!--  <router-view/>-->
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['count','title'])
  },
  methods:{
    add(){
      this.$store.commit('add',3)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 

 

 

 

 

 

 

 

第二个参数要包装成对象的用法
 

 
 
add(state,obj){
       state.count+=obj.n
       console.log(obj.msg)
     }
 

 

import { createStore } from 'vuex'

export default createStore({
  state: {
    count:0,
    title:'标题'
  },
  getters: {

  },
  mutations: {
    add(state,obj){
      state.count+=obj.n
      console.log(obj.msg)
    }
  },
  actions: {
  },
  modules: {
  },

})

 

 

 

 

 

 

 
 
 add(){
         this.$store.commit('add',{
           n:3,msg:'哈哈'
         })
       }
 

 

  <template>
    <nav>
      <p>{{ count }}</p>
      <p>{{ title }}</p>
      <button @click="add">增加</button>
    </nav>
  <!--  <router-view/>-->
  </template>

  <script>
  import { mapState } from 'vuex';
  export default {
    computed: {
      ...mapState(['count','title'])
    },
    methods:{
      add(){
        this.$store.commit('add',{
          n:3,msg:'哈哈'
        })
      }
    }
  }
  </script>

  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
  </style>

 

 

 

 

 

 

 

 

练习
 

 

 

 

不能使用v-model双向绑定的方法。任何要修改仓库（store）里的数据，都要用mutation进行提交。
 

 

 

 

 

 

mapMutations介绍
 

 

 

 

mapMutations 是 Vuex 提供的一个辅助函数，用于简化组件中调用 mutations 的过程。它可以将 store 中的 mutation 映射为组件的方法，使得调用更简洁。
 

使用方法
 

 
 
  1.  
    导入 mapMutations：
     import { mapMutations } from 'vuex';
  2.  
    在组件中使用：
     
    在组件的 methods 中使用 mapMutations 来映射 mutations。例如：
     
 
 
export default {
  methods: {
    ...mapMutations(['increment', 'decrement']),
    
    // 你也可以指定方法名称
    ...mapMutations({
      add: 'increment', // 将 store 中的 increment 映射为组件的方法 add
    })
  }
}
 
 
 

 

 

 

 

  <template>
    <nav>
      <p>{{ count }}</p>
      <p>{{ title }}</p>
      <button @click="add({n:2,msg:'增加'})">增加</button>
    </nav>
  <!--  <router-view/>-->
  </template>

  <script>
  import { mapState,mapMutations } from 'vuex';
  export default {
    computed: {
      ...mapState(['count','title'])
    },
    methods:{
      ...mapMutations(['add'])
    }
  }
  </script>

  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
  </style>

 

 

 

 

 

 

 

 

 

mapActions
 

 

 

 

这边就主要介绍辅助函数mapAction了
 

 

 

 

 

 

  <template>
    <nav>
      <p>{{ count }}</p>
      <p>{{ title }}</p>
      <button @click="add(5)">增加</button>
      <button @click="change">延迟增加</button>
    </nav>
  <!--  <router-view/>-->
  </template>

  <script>
  import { mapState,mapMutations,mapActions } from 'vuex';
  export default {
    computed: {
      ...mapState(['count','title'])
    },
    methods:{
      ...mapMutations(['add']),
      ...mapActions(['change'])
    }
  }
  </script>

  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
  </style>

 

 

import { createStore } from 'vuex'

export default createStore({
  state: {
    count:0,
    title:'标题'
  },
  getters: {

  },
  mutations: {
    add(state,n){
      state.count+=n
    }
  },
  actions: {
    change(context,num){
      setTimeout(()=>{
        context.state.count+=10
      },1000)
    }
  },
  modules: {
  },

})

 

 

 

 

 

 

 

mapGetter
 

 

 

注意！
 

 
 
1.getters函数的第一个参数是state
 
 
2.必须要有返回值
 

 

 

 

 

  <template>
    <nav>
      <p>{{ count }}</p>
      <p>{{ title }}</p>
      <button @click="add(5)">增加</button>
      <button @click="change">延迟增加</button>
      <div>
        <p>mapGetter函数:</p>
        {{filterList}}
      </div>
    </nav>
  <!--  <router-view/>-->
  </template>

  <script>
  import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
  export default {
    computed: {
      ...mapState(['count','title']),
      ...mapGetters(['filterList'])
    },
    methods:{
      ...mapMutations(['add']),
      ...mapActions(['change'])
    }
  }
  </script>

  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
  </style>

 

import { createStore } from 'vuex'

export default createStore({
  state: {
    count:0,
    title:'标题',
    list:[1,2,3,4,5,6,7,8]
  },
  getters: {
    filterList(state){
      return state.list.filter(i=>i>4)
    }
  },
  mutations: {
    add(state,n){
      state.count+=n
    }
  },
  actions: {
    change(context,num){
      setTimeout(()=>{
        context.state.count+=10
      },1000)
    }
  },
  modules: {
  },

})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  clmm_
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
Vuex看这一篇就够了

				
			

			

				

					大学生小郑的博客
				

				

					07-23
					
					983
					
				

			

		

		

			
				
Vuex看这一篇就够了

			
		

	



                

              
                



	

		

			

				
					
vuex使用看这篇就够了

				
			

			

				

					weixin_47441413的博客
				

				

					01-14
					
					207
					
				

			

		

		

			
				
一、Vuex 介绍


Vuex 是 vue 项目中实现大范围数据共享的技术方案


Vuex作用：能够方便、高效地实现组件之间的数据共享


使用 Vuex 的好处:

数据的存取一步到位，不需层层传递
数据的流动非常清晰
存储在 Vuex 中的数据都是响应式的



二、使用步骤
引入库
代码如下（示例）：
//在store文件/index.js 配置
// 1. 下包
npm i vuex   
// 2. 导入 Vuex 
import Vuex from 'vuex'   
// 3. 安装 Vu

			
		

	



                


  
              

                


	

		

			

				
					
学习 VueX 这一篇就够了

				
			

			

				

					Laptoy的博客
				

				

					05-02
					
					1922
					
				

			

		

		

			
				
VueX详解

			
		

	





	

		

			

				
					
Vuex看完这一篇就会了

				
			

			

				

					大风起兮云飞扬
				

				

					02-28
					
					370
					
				

			

		

		

			
				
Vuex
先介绍一下vuex：vuex是vue.js中用来做状态管理的一个插件，可以解决组件与组件之间通讯问题,然而之前我们也可以通过bus事件总线来解决，但是一旦项目大了，这种办法就会变得很复杂，不便于代码管理。所以作者为我们提供了这么一个仓库机制的插件。
一、首先，我们搭建好Vue-cli创建好项目，在创建的时候可以选择使用vueX，如果没有选，则可以通过命令npm install vuex ...

			
		

	



		

			
		



	

		

			

				
					
vuex 使用 一篇文章就够了

				
			

			

				

					rojie0的博客
				

				

					01-21
					
					456
					
				

			

		

		

			
				
vuex如何使用，基本结构

			
		

	





	

		

			

				
					
vuex 基础理解看这一篇就够了

				
			

			

				

					weixin_45133990的博客
				

				

					07-15
					
					229
					
				

			

		

		

			
				
vuexvuex定义工程导图基础 es6 ，vuex程序编写使用
vuex
定义
专为 Vue.js 应用程序开发的状态管理模式 ，扩展（vue是一套用于构建用户界面的渐进式框架，vue的数据驱动主要实现建立在三个对象上Dep、Watcher、Compiler）




对象
作用




Dep
主要负责依赖的收集


Compiler
可以理解为 virtual dom + patch 也就是负责视图层的渲染


Watcher
主要负责Dep和Compiler之间的联系


工程导图

基础 es6 

			
		

	





	

		

			

				
					
入门Vuex看这篇就够了

				
			

			

				

					Potry Code的博客
				

				

					03-17
					
					859
					
				

			

		

		

			
				
文章目录1.Vuex 概述1.1传统组件之间的传值方式1.2Vuex 是什么1.3使用 Vuex 统一管理状态的好处1.4什么情况下我应该使用 Vuex？2.Vuex的使用3.Vuex 的核心概念3.1 State3.1.1组件访问 State 中数据的第一种方式：3.1.2组件访问 State 中数据的第二种方式：3.2 Mutation3.3Action3.3.1触发 actions 异步任务...

			
		

	





	

		

			

				
					
Vuex基础？有这篇就够啦

				
			

			

				

					00后的一位普通处女座前端程序员
				

				

					07-28
					
					642
					
				

			

		

		

			
				
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。.........

			
		

	





	

		

			

				
					
Vuex一篇就够

				
			

			

				

					kzb68up的博客
				

				

					10-05
					
					865
					
				

			

		

		

			
				
通俗理解Vuex：状态管理、集中式存储管理。把需要多个组件共享的变量全部存储在一个对象里面，这个对象放置在顶层的vue实例中让其他组件都可以使用，并且是响应式的。
Vuex核心概念
State—保存共享状态，单一状态树
Getters—类似组件里的计算属性
Mutations—操作状态
Actions—用于进行异步操作
Modules—划分模块

文章目录前言一、简单使用二、单例模式-理解三、vue-devtools和mutations1、vue-devtools2、mutaitons四、State单一状态

			
		

	





	

		

			

				
					
用vuex写了一个购物车H5页面的示例代码

				
			

			

				

					12-02
				

			

		

		

			
				
通过购物车的一个案列，把vuex学习了一篇。  vuex概念浅谈  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。...

			
		

	





	

		

			

				
					
【2024最新版】Vue前端面试篇，看这一篇就够了

				
			

			

				

					A的博客
				

				

					07-20
					
					1408
					
				

			

		

		

			
				
输入URL：用户在浏览器的地址栏中输入网页的URL。DNS解析：浏览器会通过DNS（域名系统）将网页的域名解析为对应的IP地址。如果浏览器或操作系统已经缓存了这个域名的IP地址，则可以跳过这一步。建立TCP连接：浏览器与服务器建立TCP连接，进行三次握手，确认连接已建立。发送HTTP请求：浏览器向服务器发送HTTP请求，请求中包含了要访问的网页文件，如HTML文件。服务器处理请求并返回HTTP响应：服务器处理浏览器的请求，然后返回一个HTTP响应，响应中包含了网页的HTML内容。浏览器解析HTML。

			
		

	





	

		

			

				
					
Vue全家桶（Vue基础看这篇就够了）

				
			

			

				

					qq_63533863的博客
				

				

					04-17
					
					9616
					
				

			

		

		

			
				
第一章：vue核心

1.1.Vue 简介

1.1.1 官网

 1.英文官网：Vue.js - The Progressive JavaScript Framework | Vue.js

 2.中文官网：Vue.js

1.1.2 Vue是什么？

 一套用于构建用户界面的渐进式Javascript框架

 作者：尤雨溪

1.1.3 Vue的特点

 1.采用组件化模式，提高代码复用率、且让代码更好维护

 2.声明式代码，让编码人员无需直接操作DOM，提高开发效率

 3...

			
		

	





	

		

			

				
					
【组件传值】uniapp & vue 父子、子父、兄弟组件之间的传值（看这一篇就够了）

				
			

			

				

					weixin_48596030的博客
				

				

					07-07
					
					2873
					
				

			

		

		

			
				
【组件传值】uniapp & vue 父子、子父、兄弟组件之间的传值（看这一篇就够了）

			
		

	





	

		

			

				
					
文件系统设计 - 开发文件系统 Store (上篇)

				
			

			

				

					qq_44746132的博客
				

				

					09-21
					
					586
					
				

			

		

		

			
				
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。

			
		

	





	

		

			

				
					
webview2加载本地页面

				
			

			

				

					qq_25160759的博客
				

				

					09-23
					
					598
					
				

			

		

		

			
				
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。

			
		

	





	

		

			

				
					
WebGL复杂几何体与模型加载

				
			

			

				

					天涯学馆
				

				

					09-23
					
					404
					
				

			

		

		

			
				
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。

			
		

	





	

		

			

				
					
apply、call和bind的作用和区别

					
最新发布

				
			

			

				

					欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
				

				

					09-23
					
					685
					
				

			

		

		

			
				
javascript中，apply、call和bind的作用和区别介绍。

			
		

	





	

		

			

				
					
前端入门：HTML+CSS

				
			

			

				

					mingangel的博客
				

				

					09-21
					
					774
					
				

			

		

		

			
				
之前的文章我已经讲过HTML，这篇文章我将讲解HTML和CSS的案例。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值