Vuex
哪里有梦，哪里有家，哪里有故事哪里有她，哪里能盛开复制的花
关于Vuex ( 最下方有代码 )
什么是Vuex、Vuex的概念
1、vuex是对数据的管理者。管理方式是对数据进行集中式管理。
2、可以解决VUE当中的传递繁琐的问题。通过VUEX来对数据进行传值。vuex可以对数据进行共享
（在任何组件当中使用其数据，并且某个组件数据发生变化，相对应的组件也会发生变化。也是双向绑定。）
3、在vuex中必须遵循单项数据流(保证组件不受影响)
4、最好的一种非父子传值的一种方案
5、vuex中存放了所有公用的状态
Vuex单向数据流操作
当组件需要修改state中的数据的时候必须通过dispatch来触发actions里面的方法，actions的每一个方法里面都会有一个
commit方法，用来触发mutations里面的方法, mutations用来修改state中的数据。当mutations里面的方法触发的时候数据
就会发生改变，因为数据是响应式因此组件中的数据也会发生改变
一、
仓库中的数据在某个组件中使用:
因为仓库已经放到vue的实例中通过this是可以使用的,在组件中通过打印this查到里面的数据
渲染(在组件中渲染):{{this.$store.state.数据中的属性名}}
render把虚拟DOM渲染为真是DOM
二、
如何修改state中的数据: (遵循单项数据流)
通过Dispath触发actions中的方法：(打印this查看详情)
actions:{handleAdd(){console.log("handleAdd触发了")}
actions中的方法在使用的组件中如何调用:
this.$store.dispatch("actions中的方法名")
三、
在通过Commit触发Mutations中的方法，Commit在哪呢?
actions中的每一个方法都有一个合并后的对象
actions:{handleAdd(...dest){console.log("handleAdd触发了",dest)} Commit就在这里
这时dispatch可以传参了this.$store.dispatch("actions中的方法名",111)
通过commit触发Mutations中的方法：
Mutations:{方法名(){}}
在actions中的方法第一个参数解构出commit(对象的解构)
actions:{handleAdd({commit},params){//用一个commit方法
commit("Mutations中的方法名")
}触发成功后可以修改数据了
Mutations中的方法也有两个参数1.state对象;2.commit方法中传递过来的参数
Mutations:{方法名(state,params){}}
四、
Mutations:{方法名(state,params){1.state对象中的数据；2.commit方法中传递过来的参数
state.数据中得属性
数据改变后组件中的数据也是发生改变的
}}
Vue_vuex_辅助函数_mapState( 只能与computed用 )
state的辅助函数必须要在computed中使用
在渲染(当前)组件中引入vuex: import Vuex from "vuex";
一、数组型
在computed计算属性中写：computed:Vuex.mapState(["数据中的属性名"])//这是computed的属性值
上方渲染区: {{数据中的变量名}}
再也不用this.那些东西
二、对象型
可以改名字 数组改不了
在computed计算属性中写：computed:Vuex.mapState({属性名:"数据中的属性名"})
上方渲染区: {{对象中的属性名}}
三、函数型 (箭头函数,此方法只能在mapState中使用)
可以对数据渲染之前作二次更改 在函数中做做完在返回去
在computed计算属性中写：computed:Vuex.mapState({属性名:state=>state.数据中的属性名})
四、最终写法(解构型)(避免了写不了监听，可以继续向下操作)
computed:{...Vuex.mapState({n : state=>state.n})}
此函数执行完后会返回一个对象===对象做了个展开
Vue_vuex_辅助函数_mapActions
在渲染(当前)组件中引入vuex: import Vuex from "vuex";
actions的辅助函数:没有必要再去声明一个函数
一、函数型
在methods中写: ...Vue.mapActions(["store.js中actions的函数名"])
上方调用时只需调用中括号中的函数触发的是store中的函数不是组件中的函数
二、对象型
在methods中写: ...Vue.mapActions(属性名:"store.js中actions的函数名")
上方调用时只需调用属性名
Vue_vuex_辅助函数_mapMutations
在渲染(当前)组件中引入vuex: import Vuex from "vuex";
Mutations的辅助函数:
直接触发Mutations中的方法:
在没有异步和业务逻辑的时候是可以直接调用Mutations中的方法的但是不能直接修改数据
也是在methods中使用：
一、函数型
在methods中写: ...Vue.Mutations(["store.js中Mutations的函数名"])
上方调用时只需调用中括号中的函数触发的是store中的函数不是组件中的函数
二、对象型
在methods中写: ...Vue.mapMutations({属性名:"store.js中Mutations的函数名"})
上方调用时只需调用属性名
Vue_vuex_getters属性及辅助函数
在仓库中:
getters中的每一个函数都会有一个参数 这个参数是state
getters:{
方法名(state){//必须要有返回值
return state.操作
}
}
辅助函数:
在渲染(当前)组件中引入vuex: import Vuex from "vuex"
在computed中写:...Vuex.mapGetters(["方法名称"])
...Vue.mapGetters({属性名:"方法名称"})
代码
actions 用来处理异步 以及一些业务逻辑 actions里面所以的函数都会有2个参数 参数1 为一个对象 包含{commit dispatch state} 参数2:是传递过来的参数 actions里面的方法如果想要触发的时候必须通过dispatch 辅助函数 mapActions 方案一： methods: { ...Vuex.mapActions(["handleAdd"]) } 方案二： methods: { ...Vuex.mapActions({ Add:"handleAdd" }) } mutations 用来做数据的增删改查 mutations里面的方法用来修改state中的数据 mutations里面的所有函数都会有2个参数 参数1：state 参数2：传递过来的参数 mutations里面的方法想要触发的时候必须通过commit 辅助函数 mapMutations methods: { ...Vuex.mapMutations(["handleMutationAdd"]) } methods: { ...Vuex.mapMutations({ handleMutationAdd:"handleMutationAdd" }) } getters: getters就相当于组件中的computed一样，也是可以进行数据的缓存 主要的作用：监听state中数据的变化，当state中的数据发生改变的时候就会触发getters里面的方法 getters中的每一个函数都会有一个参数 这个参数是state 辅助函数 mapGetters computed:{ ...Vuex.mapGetters(["方法名称"]) } computed:{ ...Vuex.mapGetters({ key:"方法名称" }) }
