Vuex核心内容(一)

傷城~ 2022-10-29 01:41 218阅读 0赞

> vuex状态管理有5个核心内容: state、mutation、action、getter以及module

## 一、state ##

state提供唯一的公共数据源，所有共享的数据都要统一放到store中的state中进行存储。

**实例**

//index.js
    const store = new Vuex.Store({ 
      state: { 
        count:0
      }
    })

> 组件访问state中数据的第一种方式： this.$store.state.xx

// 组件中引入：
    <h3>当前最新的count值为：{
       {this.$store.state.count}}</h3>

> 组件访问state中数据的第二种方式：

1.  从vuex中按需导入mapState函数 import \{ mapState \} from ‘vuex’
2.  通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

<h3>当前最新的count值为：{ { count}}</h3>
    <script>
    import  { mapState}  from 'vuex'
    export default { 
      data () { 
        return { 
    
        };
      },
      computed:{ 
    		...mapState(['count'])
      }
    }
    </script>

## 二、mutation ##

*  只能通过mutation变更store数据，不可以直接操作store中的数据
 *  通过这种方式虽然操作起来稍微繁琐一点，但是可以集中监控所有数据的变化

**实例**

const store = new Vuex.Store({ 
      state: { 
        count:0
      },
      // 只有 mutations 中定义的函数，才有权利修改 state中的数据
      mutations: { 
          add(state){ 
            state.count++
          },
      }
    })

> 触发mutation的第一种方式：this.$store.commit(‘xx’)

methods:{ 
    	handle(){ 
    		this.$store.commit('add');
    	}
    }

> 触发mutation的第二种方式：

1.  从vuex中按需要导入mapMutations函数 import \{ mapMutations \} from ‘vuex’
2.  将指定的mutations函数，映射为当前组件的methods函数。

methods:{ 
    	...mapMutations(['add'])
    	handle(){ 
    		this.add();
    	}
    	//handle(){this.add();} @click="handle"可以简写@click="add" 在methods中handle这个函数就可以不写了
    }

*注意：在mutation函数中，不可以执行异步操作。*

### mutation 传参 ###

mutations: { 
       addN(state，step){ 
         state.count += step;
       }
    }

//第一种触发mutation方法：this.$store.commit('addN',x)
    methods:{ 
    	handle(){ 
    		this.$store.commit('addN',3)
    	}
    }

//第二种触发mutation方法：
    methods:{ 
    	...mapMutations(['addN'])
    	handle(){ 
    		this.addN(3);
    	}
    }