vuex里的state,actions,mutations用法与理解

Posted 2022-08-29 汤米粥

state里是放定义的全局变量/常量

actions是放全局可以调用的函数,修改stae里的变量/常量 但actions里不能直接修改state的变量/常量，里面还是需要通过mutations里定义的函数来修改比如：commit('add', 1); 同时在mutations里有一个add(state,id)方法，其实它就是个“中介”。

mutaions放真正修改state属性的方法，可以在我们的vue里直接调用，也可以通过actions来间接调用。

一、直接调用mutations里的方法 

 首先在vuex定义：

export default new Vuex.Store(
	state: 
		// 展示数据
		data: ,
	,
mutations: 
		//方法名字自定义（）
		changeDetail(state, data) 
			// 信息
			this.data=data
	      
	    

接下来调用mutaions里的方法，有两种调方式：

1.直接调用

//修改sate里的数据
this.$store.commit('changeDetail',data)

//使用state里的数据
this.$store.state.data

2.通过mapMutaionts引入后再调用

  在组件中导入vuex中的mapMutations:

//引入vuex（mapMutations主要是传递参数，辅助函数）
import 
		mapMutations
	 from "vuex"

在methods下使用…引用

methods: 
			...mapMutations(['changeDetail']),

最后一步，在需要存入vuex的时候调用

this.changeDetail(data)

二、使用 action里的方法间接调用mutations方法

首先在vuex定义

export default new Vuex.Store(
	state: 
		//定义数据
		data: ,
	,

    actions: 
	 
          //中介，修改数据
		  changeDetail( commit , data) 
			 commit('change',data)
	      
	,


    mutations:
    
        //真正修改state里的数据

        change(state,data)
            state.detail = data
        
   

接下来调用actions中的方法，也有两种方式：

1.直接调用

this.$store.dispatch('changeDetail',data)

 2.通过mapActions间接调用

在组件中导入vuex中的mapActions:

import 
        mapActions
     from "vuex"

在methods 或computed下使用…引用

//这相当于在当前组件下定义了一个changeDetail函数
methods: 
            ...mapActions(['changeDetail']),

最后，在当前组件下需要的地方直接使用：

changeDetail(data)

不知道你们有没有疑问，反正我是有两个疑问：

1. 既然可以在组直件里直接用 this.$store.state.data 来直接读取state里的变量，难道不能直接通过

通过 this.$store.state.data = 'xxx‘  或this.state.data = "xxx" 来修改变量的值吗？

答：state里面的变量（如data）不可以在组件里面进行直接修改, 强行修改不会触发视图更新。

2.既然 actions最后也要通过mutaions里的方法来修改state里的值，为什么要多此一举来这么一层“中介”呢？

答：因为mutaions里的函数只能进行同步操作，如果有异步操作的需求，比如调用某个接口后再修改state某个变量，这时候直接用mutaions里的方法就不行了。而actions里的方法就可以弥补这个缺陷，可以在调用了异步接口后，再在返回回调里调用mutaions里的方法。下面举个例子：

const store = new Vuex.Store(
    state: 
        navList: []
    ,
    mutations: 
        initNav(state, data)   // 第一个参数是state对象，第二个参数是res.data.data
            state.navList = data
        
​
    ,
    actions: 
        async getNav(context) 
            const res = await axios.get('http://127.0.0.1:3000/api/cate')
            context.commit('initNav', res.data.data)
            // 第一个参数是mutations里面的方法，第二个是参数
​
        
    
)
 274