Vuex极其详细的介绍与使用（state：统一定义公共数据，mutations：使用他来修改数据，getters：计算属性，actions:发起异步请求，modules：模块拆分）Vuex-map函数
Vuex是什么？
Vuex是一个专为Vue.js应用程序开发的状态管理模块，采用集中式储存管理应用的所有组件的状态，解决多件数据通讯。
要点：
1. 集中式管理数据状态方案
2 . 数据是响应式的 (修改数据页面也会随之改变)
Vue项目的使用Vuex:
1.在新项目中使用：
在配置vue-cli中创建项目时，直接选中Vuex项，这样就可以不用做任何配置了（脚手架会帮我们完成所有相关配置）
2.在老项目中：
（1）安装
npm i vuex（2）配置
——创建Vuex.store实例
——向Vue实例注入store
（3）使用。在组件中使用
Vuex五个主要内容
1.state：统一定义公共数据（类似date）
2.mutations: 用来修改数据的（类似于methods）
3.getters：计算属性，对现在的状态进行计算得到新的数据----派生（类似于cpmputed）
4.actions：异步操作，发起异步请求（发起axios请求）
5.modules:模块拆分，将以上五个部分进行模块haul拆分
Vuex-state 定义公共数据
state作用：定义公共数据并在组件中使用
s格式：
new Vuex.store({
state: {
属性名： 属性值
}
})实例：
new Vuex.store({
state: {
num:10,
userInfo: {
name: 'tom',
skills: ['抖音', 'B站', '美团'],
address: '武汉黑马',
logo: 'https://vuejs.org/images/logo.svg'
// https://www.runoob.com/wp-content/uploads/2016/02/react.png
}
}
})
使用：
在组件中，通过this.$store.state.属性名来访问。
this.$store.state.num在模板中，则可以省略this而直接写成： { {$store.state.属性名}}
num:{
{$store.state.num}}Vuex-mutations 修改数据
mutations作用：通过调用mutations来修改定义在state中的公共数据。
定义格式：
new Vue.store({
// 省略其他...
mutations：{
// 每一项都是一个函数，可以声明两个形参
mutation名1：function(state [, 载荷]) {
},
mutation名2：function(state [, 载荷]) {
},
}
})注意：
每一项都是一个函数，可以声明两个形参：
-
第一个参数是必须的，表示当前的state。在使用时不需要传入
-
第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据
使用格式
this.$store.commit('mutation名', 实参)实例：
new Vuex.store({
state: {
num:10,
userInfo: {
name: 'tom',
skills: ['抖音', 'B站', '美团'],
address: '武汉黑马',
logo: 'https://vuejs.org/images/logo.svg'
// https://www.runoob.com/wp-content/uploads/2016/02/react.png
}
}
})
const url = 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
this.$store.commit('changeUrl', url)Vuex-getters 计算属性
getters作用：计算属性（类似于computed）在satate中的数据基础上进行一些加工的得到新的数据 ！！！敲黑板（不会改变原来的数据）
定义格式：
new Vue.store({
//省略其他
getters：{
gieters名1：function(state){
return 要返回的数据
}
}
})在组件中通过：$store.getters.getter的名字 来访问
$store.getters.getter名state，mutetions，getters 逻辑图
vuex用actions发异步请求
actions作用：
- action中可以通过调用mutation来修改state，而不是直接变更转态
- action可以包含任意异步（例如ajax请求）操作
定义actions
new Vue.store({
// 省略其他部分
actions:{
axtions名1:function(state,载荷){
// 1.发起异步请求，请求数据
// 2.通过$state.commit调用mutation来修改/保存数据
}
}
})调用格式
this.$state.dispatch('acthion名',参数)实例：
// 发ajax请求，从后端获取数据，再来去修改state中的数据
actions: {
getBooks (context, params) {
console.log('getbooks的查询参数是', params)
axios({
url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',
method: 'GET'
}).then(res => {
console.log(res)
context.commit('setBooks', res.data.data) //需要在mutations里面封装一个setBooks函数
})
}
},this.$store.dispatch('disBooks'，{id:1}) //没有参数就不传actions一般用来发异步请求，数据回来之后，在去调用mutations来保存数据
Vuex-用 modules 来拆分复杂业务
modules作用
- 对实例Vuex.store的实参内容进行拆分，把复杂的场景模块进行拆分
- 使代码更加清晰，更容易维护。
格式：
export default new Vuex.store({
stete:{},
mutations:{},
getters:{},
actions:{},
modules:{
模块名1:{
//namespaced为true，则使用mutations必须要带上模块名
namespaced:true,
stete:{},
mutations:{},
getters:{},
actions:{},
modules
},
模块名2:{
//namespaced默认为false，使用mutations是可以不用带模块名
namespaced:true,
stete:{},
mutations:{},
getters:{},
actions:{},
modules
},
......
}
}) 访问模块中的数据：
获取state数据项：{
{$store.state.模块名.数据项名}}
获取getters数据项：{
{$store.getters['模块名/getters名']}}
访问模块中的mutations/actions：
- 如果namespaced为true，则不需要额外去补充模块名
- 如果namespaced为false，则需要额外补充模块名
- 在使用modules时，建议都给加上namespaced!
$store.commit('mutations名' , 参数) //namespaced为false
$store.commit('模块名/mutations名' , 参数) //namespaced为true
$store.dispath('dispath名' , 参数) //dispath为false
$store.dispath('模块名/dispath名' , 参数) //dispath为trueaction和mution和state的关系图
Vuex-map函数用法汇总
场景
vuex中的数据与本组件内的数据名相同
格式
...mapState({'新名字': 'xxx'})