Vuex状态管理|数据共享

一、Vuex 简单使用

1、下载Vuex 使用 npm i Vuex@2  *Vue2使用Vuex3 *Vue2使用Vuex3

2、src下创建store文件夹 创建index.js

import Vue from '@vue'//引入
import Vuex from '@vuex'

Vue.use(Vuex)//使用 初始化

const store = new Vuex.store(//创建仓库
state：{}，//数据
getters:{},//计算属性
acions:{},//异步操作
mutatiuons:{}//修改数据方法
)

export default store

3、main.js 中 引入 上面的文件 并在vue中添加store配置项

二、特点：1、数据是响应式的  2、各个模块都可以使用（跨层级）

———————————————————————————————————————————

Vuex 状态管理器中提供四种类型的配置项

1、state 提供基本数据类型

const store = new Vuex.store(//创建仓库
state：{
message：'字符串'，
arry:[1,2,3,4,5]
}，//数据
)

如何使用呢？ 我们一定要知道Vuex就是共享数据的，在任何组件都可以访问

//在模板中 
$store.state.message//message 是数据名
//js中
this.$store.state.message

---------------------------------------------------------------------------------------------------------------------------------

另外 Vue 提供了映射功能

import {maoState} from 'vue'
computeds:{
...mapState('message')//展开 message是数据名称
}

这样就可以方便使用

在模板中就可以像使用data中的数据一样之间填写数据名称 {{message}}

如何修改数据呢？ 

//在模板中 
$store.state.message = '修改后'//message 是数据名
//js中
this.$store.state.message = '修改后'

这样也是可以修改的，但是最好不要这样修改，因为当我们开发到后期，文件越来越多，不好统一修改，出现问题无法快速找到问题。之所以就引出了 mutations(专门提供修改数据的操作)

2、mutations的使用

const store = new Vuex.store(//创建仓库
state：{
message：'字符串'，
arry:[1,2,3,4,5]
}，//数据
mutations:{//修改数据配置项
setMessage(state,msg){//第一个参数是指向state的 第二个就是参数也叫载荷
state.message = msg//修改
}
}
)

如何使用？

//模板中
$store.commit('setMessage','新数据')//第一个是mutation提供的函数名称 第二个是参数
//js中
this.$store.commit('setMessage','新数据')

那么他也有像mapState一样的辅助函数帮助我们简单使用吗？

也是有的，他就是mapMutations,话不多说上教程。

import {mapmutations} from '@vue'

methods:{
...mapMutations('setMessage')
}

//模板中 @click='setMessage('参数')'

3、getters配置项（计算属性）

const store = new Vuex.store(//创建仓库{
state：{
message：'字符串'，
arry:[1,2,3,4,5]
}，//数据
mutations:{//修改数据配置项
setMessage(state,msg){//第一个参数是指向state的 第二个就是参数也叫载荷
state.message = msg//修改
}
}，
getters：{
getArry(context){//要有一个参数
retun context.arry//必须有返回值
}
}
})

简单使用

//在模板中使用
$store.getters.getArry

//Js中
this.$store.getters.getArry

 使用辅助函数渐变使用

import {mapGetters} from 'vue'
computeds:{
...mapGetters('getArry')//展开 message是数据名称
}
//{{getArry}}

4、actions配置项（异步处理属性）

const store = new Vuex.store(//创建仓库{
state：{
message：'字符串'，
arry:[1,2,3,4,5]
}，//数据
mutations:{//修改数据配置项
setMessage(state,msg){//第一个参数是指向state的 第二个就是参数也叫载荷
state.message = msg//修改
}
}，
getters：{
getArry(state){//要有一个参数
retun state.arry//必须有返回值
}
}，
actions:{//异步操作 网络请求 定时器
getList(context,msg){
setTimeout(()=>{
context.message = msg
},5000)//例如五秒后修改数据
}
}
})

使用

//模板中

$store.dispatch('getLIst','请求数据了')

//js中

this.$store.dispatch('getLIst','请求数据了')

使用mapActions简化操作

import {mapActions} from '@vue'

methods:{
...mapActions('getList')
}

//模板中 @click='getList('得到参数了')'