vuex使用
目录
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的属性名})
笔记.....