vuex使用

vuex使用

目录

vuex使用

1.下载vuex包

2.引入vuex包

3.注册vuex

4.创建vuex实例

5.挂载到Vue中

---

1.下载vuex包

npm i vuex -s

2.引入vuex包

import Vuex from "vuex"

3.注册vuex

Vue.use(Vuex);

4.创建vuex实例

const store =  new Vuex.Store({

  state : {} ,  // 储存数据

  mutations : {} ,  //储存方法

  getters：{} ,  //从基本数据(state)派生的数据，相当于state的计算属性

  actions:{}  //处理异步放在这里   触发方式dispatch

modules : {}  ,  //模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰方便管理。

})

5.挂载到Vue中

var vm = new Vue({

 el: "app",

 store

})

注意： 不推荐组件中直接操作vuex中的state , 而是在mutations中操作state , 因为这样在出现问题中能够快速定位操作数据的方法

调用state   this.$store.state.数据名称

触发mutations  this.$store.commit("方法名",参数)

调用getters  this.$store.getters.名称

 

 

moudle 下面的每个模块要添加namespaced : true,  不然 moudle 下的 getters actions mutations 都是全局注册 会触发两次

如果加了  conmit("模块名/mutations名")     dispatch("模块名/actions名")   $store.getters["模块名/getters名"]

 

为了方便获取到moudle模块下面的数据  vuex 提供了一个方便的方法

{ mapState , mapGetters , mapMutations , mapActions } from "vuex";

...mapGetters("模块名", ["getters名" , "getters名"])   或者  ...mapGetters("模块名" , {映射名:"getters名"})

mapMutations 、mapActions 同上

注意 : mapState 必须用在computed 中  且

需要修改为映射名 需要这么写  ...mapState("模块名" , {映射名:state => state.模块下的state的属性名})

笔记.....