vuex 是什么？
- 独立于组件体系之外的状态管理模式，采用集中式存储，响应式，
使用场景：大项目
Vuex的学习内容
- state:统一定义公共数据（类似于 data） ---保存公共数据
- mutations:使用它来修改数据（类似于methods） --- 修改数据
- getters: 类似于computed(计算属性，对现有的状态进行计算得到新的数据) ---计算数据
- actions:发起异步请求 ---发起请求
- modules:模块拆分 ---拆分模块
vuex的使用
-
安装 yarn add vuex 或者 npm i vuex
-
配置
- 创建Vuex。store实例
- 向Vue实例注入 store
-
使用 在组件中使用 store
state 统一定义公共数据
定义格式
new Vue.stote({
state:{
属性名：属性值
}
})
-
在组件中
this.$store.state.属性名 来访问 -
在模块中
可以省略 this 而直接写成 {{$store.state.属性名}}
mutations 修改数据
注册的格式
new Vue.store({
...省略其他
mutations:{
//每一项都是一个函数，可以声明两个形参
mutation 名1 : function(state [,载荷] ){
},
mutation 名2 : function(sate [,载荷]){
}
}
})
每一项都是一个函数，可以声明两个形参：
- 第一个参数输必须的，表示当前的state。 在使用时不需要传入
- 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据
使用格式
this.store.commit('mutation名字',第二个参数)
或
this.stotr.commit({type:'mutation名字'})
getters 计算数据
作用：state 中的数据的基础上，进一步对数据进行加工得到新数据。（与组件中 computed一样）
定义格式
new Vuex.store({
...省略其他...
getters:{
//state 就是上班定义的公共数据 state
getter的名字1: function(state){
return 要返回的值
}
}
})
使用格式
在组件中通过: $store.getters.getter的名字 来访问
action 发起异步请求
作用
可以通过Action来修改 state , 类似于 mutation 的，不同在于：
- action 中可以调用 mutation 来修改 state ，而不是直接变更状态
- Action 可以包含任意异步 (例如ajax请求)操作
定义格式
new Vuex.store({
// 省内其他...
actions:{
// context 对象自动传入，它与store实例具有相同的方法和属性
action的名字:function(context,载荷){
// 1.发异步请求，请求数据
// 2.commit调用mutation来修改/保存数据
// context.commit('mutation名',载荷)
}
}
})
调用格式
在组件中通过 this.$store.dsipatch('actions的名字',参数) 来调用 action
modeles 拆分模块
作用：拆分模板，把复杂的场景按模块来拆开
格式
export default new Vuex.Store({
// state:用来保存所有的共数据
state:{},
getters:{},
mutations:{},
actions:{},
modules:{
模块名1:{
// namespaced 为true ,则在使用 mutations时，就必须加上模块名
namespaced:true,
state:{},
getters:{},
mutations:{},
actions:{},
modules:{}
}
模块名1:{
// namespaced 不写，默认为 false ,则在使用 metations时，不需要加模块名
state:{},
getters:{},
mutations:{},
actions:{},
modules:{}
}
}
})
访问数据和修改数据的调整
-
访问模块中的数据，要加上模块名
获取数据项:{{$store.state.模块名.数据项名}} 获取 getters:{{$store.getters['模块名/getters名']}} -
访问模块中的 mutations/actions:
- 如果namespaced 为 true ，则需要额外去补充模块名
- 如果namespaced 为 false ，则不需要额外补充模块名
$store.commit('mutations名') // namespaced 为 false $store.commit('模块名/mutations名') // namespaced 为 true
Vuex-辅助函数 mapState
mapState是辅助函数，将vuex中的数据投射到组件内部
mapState的使用步骤
映射
// 1.导入辅助函数 mapState,它是在vuex中定义的一个工具函数。
// es6 按需导入 inpmort { mapState } from "vuex"
import { mapState } from "vuex"
computed: {
// 说明1: ...对象 是把对象展开，合并到 computed
// 说明2: mapState 是一个函数
// ['数据项1','数据项2']
...mapState(['xxx'])
...mapState({'新名字':'xxx'})
}
使用
<template>标签里面不用加 this 直接{{xxx}}
<script>标签里面 this.xxx
Vuex-辅助函数mapState对数据重命名
场景：vuex中的数据与本组件的数据名相同
格式
...mapState({'新名字':'xxx'})
Vuex-map 函数用法汇总
如何使用全局state
-
直接使用： this.$store.state.xxx;
-
map辅助函数：
computed: { ...mapState(['xxx']), ...mapState({'新名字': 'xxx'}) }
如何使用modules中的state
-
直接使用： this.$store.state.模块名.xxx;
-
map辅助函数：
computed: { ...mapState('模块名', ['xxx']), ...mapState('模块名', {'新名字': 'xxx'}) }
如何使用全局getters
-
直接使用：
this.$store.getters.xxx -
map辅助函数：
computed: { ...mapGetters(['xxx']), ...mapGetters({'新名字': 'xxx'}) }
如何使用modules中的getters
-
直接使用：
this.$store.getters.模块名.xxx -
map辅助函数：
computed: { ...mapGetters('模块名', ['xxx']), ...mapGetters('模块名',{'新名字': 'xxx'}) }
如何使用全局mutations
-
直接使用：
this.$store.commit('mutation名', 参数) -
map辅助函数：
methods: { ...mapMutations(['mutation名']), ...mapMutations({'新名字': 'mutation名'}) }
如何使用modules中的mutations（namespaced:true）
-
直接使用：
this.$store.commit('模块名/mutation名', 参数) -
map辅助函数：
methods: { ...mapMutations('模块名', ['xxx']), ...mapMutations('模块名',{'新名字': 'xxx'}) }
如何使用全局actions
-
直接使用：
this.$store.dispatch('action名', 参数) -
map辅助函数：
methods: { ...mapActions(['actions名']), ...mapActions({'新名字': 'actions名'}) }
如何使用modules中的actions（namespaced:true）
-
直接使用：
this.$store.dispatch('模块名/action名', 参数) -
map辅助函数：
methods: { ...mapActions('模块名', ['xxx']), ...mapActions('模块名',{'新名字': 'xxx'}) }
全天核心API小结
actions和mutations和state的关系图
