Vuex最全讲解，成为前端大佬必备知识，爆肝一万多字，我行你也行❤

转x33g5p2x  于2021-09-24 转载在 Vue.js  
字(10.3k)|赞(0)|评价(0)|浏览(890)

Vuex概况

store核心概念

1.- State：  包含了store中存储的各个状态。

2.- Getters：  类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。

3.- Mutation： 一组方法，是改变store中状态的执行者，只能是同步操作。

4.- Action：  一组方法，其中可以包含异步操作。

5.- Moudule：  Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。   

vuex辅助函数

在Vuex中获取数据的辅助函数有两个mapState、mapGetters,

操作Mutation和acitonhas函数mapMutations、mapActions。

前两个用在computed（计算属性中）

后两个用在methods(方法中)

如何使用

多个组件共享同一个状态（数据）

1.安装vuex

新建store文件夹===>index.js

main.js中，导入store对象，并且放在new Vue中 就可以通过this.$store的方式获取到这个store对象
2.使用vuex中的count（state中定义的共享状态）

this.$store.state.count

3.不能直接修改store中的状态，直接修改devtools监听不到数据的修改

4.mutations 负责同步修改状态

Vuex的store修改状态唯一的方式：提交mutations-->(this.$store.commit('add'))

Getters Store中的计算属性

  1. // 计算数字的平方
  2.     quadratic(state) {
  3.       // 第一个参数，状态state
  4.       return state.count * state.count
  5.     }

2.筛选数据

  1. filterInfo(state) {
  2.         return state.info.filter(res =>{
  3.           return res.age>18
  4.         })
  5.   }
  • 获取数据
  1. info:this.$store.getters.filterInfo

3.如果想要获取符合条件的个数

  • {{$store.getters.filterInfo.length}}
    4.如果不想年龄晒选写死，想自己输入年龄,只需要在getters里写一个方法
  1. // 筛选数据
  2.     filterInfo(state, age) {
  3.       //要返回一个方法才可以传值
  4.       //age返回的不是一个确定的值，而是一个函数
  5.       // 1.
  6.       // return function(age){
  7.       //   return state.info.filter(res =>{
  8.       //     return res.age>age
  9.       //   })
  10.       // }
  11.       // 2.
  12.       return (age) => {//return后才可以传递参数
  13.         return state.info.filter(res => res.age > age)
  14.       }

5.getters中的两个参数

  1. // 第一个state,拿数据，第二个参数geters:也就是说可以从getters中调用上面平方根的方法
  2. testGettes(state,getters){
  3.   return getters.quadratic
  4. }

vuex辅助函数 

辅助函数

mapState, 用于将state中的数据映射到组件的计算属性中

  1. <!-- 第一种 -->
  2. 		
  3. 		<!-- 
  4. 		    组件中的计算属性名称，和vuex状态名称不一致的时候，可以使用对象写法
  5. 		 -->
  6. 		computed:mapState({ 
  7. 			cnum:"count",
  8. 		})
  9. 		<!-- 第二种 -->
  10. 		<!-- 
  11. 			字符串数组写法，
  12. 			组件中计算属性名，和vuex中状态名一致的时候
  13. 		 -->
  14. 		 computed:mapState([
  15. 			"count",
  16. 		 ])
  17. 		 <!-- 第三种 -->
  18. 		 <!-- 
  19. 			当组件有自己的计算属性的时候，我们可以使用结构写法，将辅助函数合并到计算属性中
  20. 		 -->
  21. 		 
  22. 		 computed:{
  23. 			...mapState({
  24. 				cnum:"count",
  25. 			 })
  26. 		 }

mapGetters 用于将getter中的计算属性映射到组件的计算属性中用法同mapState

  1. computed:{
  2. 			// 对象展开符，解构mapGetters
  3. 			...mapGetters({
  4. 				// 将store中的getters的filterInfo，映射到组件上的info计算属性上
  5. 				info:"filterInfo"
  6. 			}),
  7. 			
  8. 			...mapGetters([ //字符串数组
  9. 				"getInfoLength"
  10. 			])
  11. 		}
  12. 		
  13. 	mapMutations : 用于将mutations映射到methods中
  14. 	...mapMutations([
  15. 		"add"
  16. 	]),
  17. 	// 对象写法
  18. 	...mapMutations({
  19. 		// 同步，通过commit触发mutations
  20. 		myadd:"add",
  21. 		// 方法名：mutation函数名
  22. 		addtwo:"addParms"
  23. 	}),
  25. 	mapActions ：于将actions映射到methods中
  26. 	...mapActions({
  27. 		// 方法名：mutation函数名
  28. 		myasync:"asyncAdd"
  29. 	})

Vuex中的核心 --- modules

当项目比较大的时候，如果只有一个模块来维护数据，那么这个模块会非常的大，对于维护性来说，不是特别高，所以vuex中，提供模块功能，我们可以通过modules将vuex处理为多个模块

  1. const myCount={
  2. 	state:{
  3. 		user:{
  4. 		  name:'admin',
  5. 		  pass:'12345'
  6. 		},
  7. 		count:10
  8. 	},
  9. 	getters:{
  10. 		
  11. 	},
  12. 	mutations:{
  13. 		// 模块的同步中是没有第三参数，(根状态)
  14. 		cAdd(state,paylaod){
  15. 			console.log(this)
  16. 			state.count++
  17. 		}
  18. 	},
  19. 	actions:{
  20. 		
  21. 	}
  22. }
  24. export default new Vuex.Store({
  25.   state:{
  26. 	  num:2
  27.   },
  28.   modules: { // 模块选项
  29. 	 // 引用myuser模块
  30. 	  u:myUser,
  31. 	  c:myCount, 
  32. 	  cat
  33. 	
  34.   }
  35. })

使用模块的属性

  1. $store.state.模块名称.属性名
  2. $store.getters.模块名称.属性名
  4. $store.commit('方法名称')//同步提交
  5. $store.dispatch('方法名称') //异步提交

实战解析 

上面概念说完了，该实战练习了，动起来！

State,Mutations

store下的index.js

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. // 安装插件
  4. Vue.use(Vuex)
  6. export default new Vuex.Store({
  7.   state: {//存储状态
  8.     // 自定义共享状态
  9.     count:0,
  10.     stu:[
  11.       {id:1001,name:123},
  12.       {id:1003,name:'符鼠'},
  13.       {id:1004,name:'追梦'},
  14.     ],
  15.     user:{
  16.       name:'随便',
  17.       sex:'随机'
  18.     }
  19.   },
  20.   // vuex中的store状态更新的唯一方式是提交Mutation
  21.   mutations: {//写方法，通过mutations修改、页面的插件才能监听到
  22.     add(state){//方法的第一个参数就是state，也就是state的对象
  23.       // this是store对象
  24.       state.count++
  25.     },
  26.   //state(store中的state),(Payload:提交方法携带的参数)
  27.     addTen(state,ten){//点击加10
  28.       state.count += ten
  29.     },
  30.     addTwo(state,obj){//点击加2，加obj才能接收对象
  31.       state.count += obj.two
  32.     },
  33.     // 向stu数组中添加一条数据
  34.     addStu(state,payload){
  35.       state.stu.push(payload)//向数组中添加数据
  36.     },
  37.     updUser(state,age){//给stu对象添加新属性
  38.       // state.user.age='18'不能写等号
  39.       // state.user = {...state.user,'age':12}
  40.       Vue.set(state.user,'age',123)
  41.     }
  42.   },  
  43.   actions: {},
  44.   modules: {}
  45. })

Aone组件

  1. <template>
  2.   <div class="hello">
  3.     <h1>aone组件</h1>
  4.     <h2>{{$store.state.count}}</h2>
  5.     <li>{{$store.state.stu}}</li>
  7.     <button @click="addTen">+10</button>
  8.     <button @click="addStu">添加成员</button>
  9.   </div>
  10. </template>
  11. <script>
  12. export default {
  13.   name: 'aone',
  14.   props: {
  15.     msg: String,
  16.     count:Number
  17.   },
  18.   data() {
  19.     return {
  20.       stu:{id:1005,name:'测试'}
  21.     }
  22.   },
  23.   methods: {
  24.     addTen(){
  25.       // 触发mutations函数，指定额外参数,字符串方式提交
  26.       this.$store.commit('addTen',10)  
  27.     },
  28.     addStu(){
  29.       this.$store.commit('addStu',this.stu)
  30.     }
  31.   },
  32. }
  33. </script>

hello组件

  1. <template>
  2.   <div class="hello">
  3.     <h1>helloworld组件</h1>
  5.     <h2>{{$store.state.count}}</h2>
  6.     <h2>{{$store.state.user}}</h2>
  7.     <button @click="addTwo">点击加2</button>
  8.     <button @click="updUser">修改</button>
  9.   </div>
  10. </template>
  11. <script>
  12. export default {
  13.   name: 'HelloWorld',
  14.   props: {
  15.     msg: String,
  16.     count:Number
  17.   },
  18.   methods: {
  19.     addTwo(){
  20.       // 触发mutations函数，指定额外参数,对象形式提交
  21.       this.$store.commit({
  22.         type:'addTwo',
  23.         two:2
  24.       })  
  25.     },
  26.     updUser(){
  27.       // 触发mutations函数，指定额外参数
  28.       this.$store.commit({
  29.         type:'updUser' })
  30.     }
  31.   },
  32. }
  33. </script>

Actions,Getters 

store下的index.js

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. // 安装插件
  4. Vue.use(Vuex)
  5. // 实例化vuex并导出
  6. export default new Vuex.Store({
  7.   state: {
  8.     count: 0,
  9.     info: [
  10.       {
  11.         di: 1, name: '开发者1', age: 21
  12.       },
  13.       {
  14.         di: 2, name: '开发者2', age: 22
  15.       },
  16.       {
  17.         di: 3, name: '开发者3', age: 23
  18.       },
  19.     ]
  20.   },
  21.   // 只能通过mutations更改数据
  22.   mutations: {//如果mutation是一个异步函数，那么devtools不能跟踪数据变化
  23.     // mutations负责同步修改状态
  24.     increment(state, payload) {
  25.       //   setTimeout(()=>{
  26.       state.count += payload
  27.       //   },2000)
  28.     }
  29.   },
  30.   // 专写异步actions
  31.   actions: {//context上下文对象
  32.     asyncIcrement(context, payload) {
  33.       setTimeout(() => {
  34.         context.commit('increment', payload)
  35.       }, 2000)
  36.     }
  37.   },
  38.   getters: {//store的计算属性
  39.     // 计算数字的平方
  40.     quadratic(state) {
  41.       // 第一个参数，状态state
  42.       return state.count * state.count
  43.     },
  44.     // 筛选数据
  45.     filterInfo(state, age) {
  46.       //要返回一个方法才可以传值
  47.       //age返回的不是一个确定的值，而是一个函数
  48.       // return function(age){
  49.       //   return state.info.filter(res =>{
  50.       //     return res.age>age
  51.       //   })
  52.       // }
  54.       return (age) => {//return后才可以传递参数
  55.         return state.info.filter(res => res.age > age)
  56.       }
  58.     },
  59.     testGettes(state,getters){
  60.       // 调用上面平方根的方法
  61.       return getters.quadratic
  62.     }
  64.   },
  65.   modules: {
  67.   }
  68. })

myvux组件

  1. <template>
  2.   <div id="main">
  3.     <h2>这是myvue组件</h2>
  4.     <h3>{{$store.state.count}}</h3>
  5.     <button @click="add">+1</button>
  6.     <button @click="asyAdd">异步+1</button>
  7.     <h2>获取年龄小于22的开发</h2>
  8.   </div>
  9. </template>
  10. <script>
  11. export default {
  12.   methods: {
  13.     add(){
  14.       this.$store.commit('increment',5)
  15.     },
  16.     asyAdd(){
  17.       // 触发actions异步并传参
  18.       this.$store.dispatch('asyncIcrement',10)
  19.     }
  20.   },
  21. }
  22. </script>

myhome组件

  1. <template>
  2.   <div id="home">
  3.     <h2>这是home组件</h2>
  4.     <h3>{{$store.state.count}}</h3>
  6.     <h3>平方：{{$store.getters.quadratic}}</h3>
  7.     <!-- 通过getters来筛选数据 -->
  8.     <div>
  9.       <h3>获取大于22的</h3> 
  10.       <li v-for="itme in info">
  11.         {{itme}}
  12.       </li>
  13.         <!-- {{$store.getters.filterInfo.length}} -->
  14.         //调用上面函数
  15.         <h5>{{$store.getters.testGettes}}</h5>
  16.     </div>
  17.   </div>
  18. </template>
  20. <script>
  21. export default {
  22.   data() {
  23.     return {
  24.       info:this.$store.getters.filterInfo(22)
  25.     }
  26.   },
  27. }
  28. </script>

 辅助函数及Modules

store下的index.js

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  4. export default new Vuex.Store({
  5.   state: {
  6.     count:0,
  7.     user:{
  8.       name:'admin',
  9.       pass:'123'
  10.     },
  11.     info: [
  12.       {
  13.         di: 1, name: '开发者1', age: 21
  14.       },
  15.       {
  16.         di: 2, name: '开发者2', age: 22
  17.       },
  18.     ]
  19.   },
  20.   getters:{
  21.     filterInfo(state){
  22.       // 过滤大于20的数据
  23.       return state.info.filter(info=>info.age>22)
  24.     },
  25.     getInfoLeng(state,getter){
  26.       return getter.filterInfo.length
  27.     }
  28.   },
  29.   mutations: {
  30.     add(state){
  31.       this.count ++
  32.     },
  33.     addParms(state,num){
  34.       this.count += num
  35.     }
  36.   },
  37.   actions: {
  38.     //异步
  39.     asyncAdd(context){
  40.       setTimeout(()=>{
  41.         context.commit('add')
  42.       },2000)
  43.     }
  44.   },
  45.   modules: {
  46.   }
  47. })

Mystate组件（mapstate对应state）

  1. <template>
  2.   <div id="mystate">
  3.     <!-- 使用vuex中的count -->
  4.     <p>数字：{{ $store.state.count }}</p>
  5.     <!-- <p>数字data：{{num}}</p> -->
  6.     <!-- <p>计算属性中的数字：{{cnum}}</p> -->
  7.     <!-- vuex中的数据 -->
  8.     <!-- <p>mapstate:{{count}}</p>
  9.     <p>mapstate:{{user}}</p> -->
  11.     <p>cuser:{{ cuser }}</p>
  12.     <p>cuser:{{ csuser }}</p>
  13.     <p>cnum:{{ cnum }}</p>
  15.     <p>组件自己的计算属性：{{ cPrice }}</p>
  16.   </div>
  17. </template>
  19. <script>
  20. import {mapState} from 'vuex'
  21. // console.log(mapState);
  22.  export default {
  23.   data() {
  24.     return {
  25.       // 在data中定义不是响应式
  26.       num:this.$store.state.count,
  27.       price:10
  28.     }
  29.   },
  30.   // 计算属性
  31.   // computed:{
  32.   //   cnum(){
  33.   //     return this.$store.state.count
  34.   //   }
  35.   // }
  36.   // 通过mapState辅助函数，帮我们自动生成计算属性
  37.   // computed:mapState([//字符串数组写法
  38.   // // 属性名和vuex状态名相同可以使用数组的形式写
  39.   //   'count',//将vuex中状态count映射到计算属性中
  40.   //   'user'
  41.   // ])
  43.   // 以对象形式使用
  44.   // computed:mapState({
  45.   //   cuser(state){
  46.   //     // 通过计算属性的第一个函数，是vuex中的状态state,所以可以通过state直接获取数据
  47.   //     return state.user//this.$store.user
  48.   //   },
  49.   //   // 简写方式
  50.   //   csuser:state => state.user,
  51.   //   // 等价于tate => state.count
  52.   //   cnum:'count'
  53.   // })
  55.   computed:{
  56.     //组件自己的计算属性
  57.     cPrice(){
  58.       return '$'+this.price
  59.     },
  60.     //通过mapState映射过来的计算属性
  61.     ...mapState({
  62.     cuser(state){
  63.       // 通过计算属性的第一个函数，是vuex中的状态state,所以可以通过state直接获取数据
  64.       return state.user//this.$store.user
  65.     },
  66.     // 简写方式
  67.     csuser:state => state.user,
  68.     // 等价于tate => state.count
  69.     cnum:'count'
  70.   })
  71.   }
  72. }
  73. </script>

Mygetter组件(mapgetters对应getters)

  1. <template>
  2.   <div id="mygetter">
  3.     <h3>mapgetter用法</h3>
  4.     <p>直接使用getters:{{$store.getters.filterInfo}}</p>
  5.     <p>mapgetters:{{info}}</p>
  6.     <p>获取长度(info)：{{getInfoLeng}}</p>
  7.   </div>
  8. </template>
  9. <script>
  10. // 获取辅助函数
  11. import { mapGetters, mapState } from "vuex";
  12. // console.log(mapState);
  13. export default {
  14.   computed: {
  15.     // 对象展开符解构mapgetters
  16.     ...mapGetters({//对象写法
  17.       // 将store中的getters的filterInfo映射到组件上的info计算属性上
  18.       info:'filterInfo'
  19.     }),
  20.     ...mapGetters([//字符串数组写法
  21.       'getInfoLeng'
  22.     ])
  23.   },
  24. };
  25. </script>

mymutations组件（mapmutations对应mutations）

  1. <template>
  2.   <div id="mymutations">
  3.     <h3>使用mapmutions和mapactions</h3>
  4.     <button @click="add">触发add</button>
  5.     <button @click="myadd">触发myadd</button>
  6.     <!-- 传参 -->
  7.     <button @click="addtwo(3)">+3</button>
  8.     <button @click="myasync">触发异步</button>
  9.   </div>
  10. </template>
  12. <script>
  13. // 获取辅助函数
  14. import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';
  15. export default {
  16.   // 计算属性
  17.   computed:{ 
  18.   },
  19.   // 放方法
  20.   methods: {
  21.     // 为了触发mutation函数 定义的方法没必要这么写
  22.     // clickAdd(){
  23.     //   this.$store.commit('add')
  24.     // }
  26.     //触发异步
  27.     myasync(){
  28.       this.$store.dispantch('asyncAdd')
  29.     },
  31.     // 字符串数组的用法
  32.     ...mapMutations([
  33.       'add'
  34.     ]),
  35.     // 对象写法
  36.     ...mapMutations({
  37.       // 同步方法通过commit触发mutauions
  38.       myadd:'add',
  39.       // 方法名：mutation函数名
  40.       addtwo:'addParms'
  41.     }),
  42.     //异步
  43.     ...mapActions({
  44.       myasync:'asyncAdd'
  45.     })
  46.   },
  47. }
  48. </script>

Modules模块的使用

  1. <script>
  2. //vuex文件
  3. import Vue from 'vue'
  4. import Vuex from 'vuex'
  5. import myUser from './myuser'
  6. import cat from './cat'
  8. Vue.use(Vuex)
  10. // const myUser={
  11.  
  12. // } 
  13. export default new Vuex.Store({
  14.   modules: {//模块选项
  15.     // 引入
  16.     u:myUser,
  17.     cat
  18.   }
  19. })
  20. </script>
  21. -----------------------------------------------------------下面是展示页面
  22. <template>
  23.   <div class="modules">
  24.     <!-- 多了一层u -->
  25.     <h4>user信息：{{$store.state.u.user}}</h4>
  26.     <h4>cat信息：{{$store.state.cat.mycat}}</h4>
  27.   </div>
  28. </template>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_52691965/article/details/120460154

内容来源于网络，如有侵权，请联系作者删除！

vue.jsJavaScriptvue

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com