Vuex 随记

Vuex 随记

官网：https://vuex.vuejs.org/zh/guide/mutations.html

零基础教程（比看官网快get，就看入门不看实战，很快的！！！）：

https://www.bilibili.com/video/BV1h7411N7bg?p=1

其他学习资料：

1. uniapp中使用Vuex存储全局变量和方法

store.js 文件配置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

模板

定义

	 export default new Vuex.Store({
        state: {
            count: 0
        },
        mutations:{
            // 有参数
            addN(state, step){
        	   state.count += step;
            }
        },
        actions:{
        	addNAsync(context, step){
        	   setTimeout(()=>{
        	       //数据操作还是需要调用mutations里的函数
        	       context.commit('addN', step);
				},1000)
			}
		},
		getters: {
	    	showNum:state => {
	    		return '当前最新的数据是' + state.count
			}
		}

	})

使用：

       //引入
		import { mapState， mapMutations，mapActions，mapGetters } from 'vuex
	
	  	computed:{ //写在计算函数里面
			...mapState([''count])
	    	...mapGetters(['showNum'])
		}，
		method:{ //写在method里面
			...mapMutations(['add', 'addN'])，
			...mapActions(['addNAsync'])
		}

属性介绍

state：放置需要共享的数据

• 定义

   export default new Vuex.Store({
      state: {
          count: 0
      },
  })
  

• 使用：
  1.直接引入：state

  	this.$store.state.count
  

  2.从vuex中按需导入mapState函数:

  	//引入
  	import { mapState } from 'vuex
  	computed:{ //写在计算函数里面
  		...mapState(['count'])
  	}
  	//使用----直接当成data用就是了
  	console.log(this.count);
     <div>{{count}}</div> 
  

···

Mutation: 修改state里的数据只能通过mutation，第一个参数必定是state

• 定义

   export default new Vuex.Store({
      state: {
          count: 0
      },
      mutations:{
      	add(state){
      	   state.count += 1;
          },
          
          // 有参数
          addN(state, step){
      	   state.count += step;
          }
  
      }
  
  })
  

• 使用：
  1.直接引入：（commit）

  	//this.$store.commit('函数名')；
  	this.$store.commit('add')
      this.$store.commit('addN', 3)
  

  2.从vuex中按需导入mapMutations函数:

  	//引入
  	import { mapState， mapMutations } from 'vuex
      methods:{  //写在methods函数里面
  		...mapMutations(['add', 'addN'])
  	}
  	//使用----直接当成自己的函数用就是了
     <div @click =“ add ”></div> 
    
    
  	handleClick(){
     	 			this.addN(3);
  	}
         
  
  

Action: 进行异步处理的操作（如延时操作），提交的是mutation，不是直接操作变更状态

• 定义

   export default new Vuex.Store({
      state: {
          count: 0
      },
      mutations:{
          // 有参数
          addN(state, step){
      	   state.count += step;
          }
      },
      actions:{
      	addNAsync(context, step){
      	   setTimeout(()=>{
      	       //数据操作还是需要调用mutations里的函数
      	       context.commit('addN', step);
  			},1000)
  		}
  	}
  
  })
  

• 使用：
  1.直接引入：dispatch

  	this.$store.dispatch('函数名')
  	this.$store.dispatch('addNAsync', 5)
  
  

  2.从vuex中按需导入mapActions函数:

  	//引入
  	import { mapState， mapMutations，mapActions } from 'vuex
      methods:{  //写在methods函数里面
  		...mapMutations(['add', 'addN'])，
  		...mapActions(['addNAsync'])
  
  	}
  	//使用----直接当成自己的函数用就是了
     <div @click =“ addNAsync(5) ”></div> 
    
    
  	handleClick(){
     	 			this.addNAsync(5);
  	}
  

···

Getter: 用于对store数据进行加工，对原来数据不进行改变

• 定义

   export default new Vuex.Store({
      state: {
          count: 0
      },
      getters: {
      	showNum:state => {
      		return '当前最新的数据是' + state.count
  		}
  	}
  
  })
  

• 使用：
  1.直接引入：getters

  	this.$store.getters.名称
  	<div>{{this.$store.getters.showNum}}<div>
  	<div>{{$store.getters.showNum}}<div
  

  2.从vuex中按需导入mapActions函数:

  	//引入
  	import { mapState， mapMutations，mapActions，mapGetters } from 'vuex'
  
    	computed:{ //写在计算函数里面
  		...mapState([''count])
      	...mapGetters(['showNum'])
  	}
  	//使用----直接当成data用就是了
     <div>{{.showNum}}<div>
  

···

modules：应用复杂时，解决store臃肿的问题，将 store 分割成模块（按需使用）

总结

1. state 和 Getter：都是定义的参数，需要检测变化，因此在使用的时候在computed里面进行导入。

2. Mutation 和 Action ：都是定义的函数，使用的时候是在method里进入导入

3. 四个的辅助函数分别是 ：
   mapState， mapMutations，mapActions，mapGetters
   需要在使用的js里import一下：
   import { mapState， mapMutations，mapActions，mapGetters } from 'vuex'

4. 四个的直接引入方法是：

   		this.$store.state.参数名
   		this.$store.commit('函数名'， 参数)
       	this.$store.dispatch('函数名'， 参数)	
           this.$store,getters.参数名
   

5. 小学生总结，有什么表达不准确或者错误的，欢迎指正

一些报错

1.vuex的版本不对应问题：vuex@4.0.2 requires a peer of vue@^3.0.2 but none is installed. You must install peer dependencies yourself

解决：检查当前的vue版本号（在package.json文件可看），寻找对应的vuex版本（图片来源），重新下载

注意：虽然报错中有提示要用什么vue版本对应，但是不建议修改vue版本，项目中的其他包版本有些和当前vue版本对应下载的，一旦vue版本修改，其他包可能版本都要修改