目录
使用vuex -> 查看vue官网--生态系统---vuex
注:vuex中的数据是存储在
内存
中的,也就是说页面一刷新,vuex中数据就恢复到初始状态了
!
下载
使用命令npm install vuex --save
进行下载
配置
在src
文件夹下创建一个store
文件夹,store中创建一个index.js
文件进行vuex配置(非强制);
[1]导入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 全局注册vuex
[2]初始化vuex实例
const store=new Vuex.Store({
state:{
// 存储vuex的共享数据
},
mutations:{
// 同步操作state中的数据
},
actions:{
// 异步操作state中的数据
},
getters:{
// 获取state中的数据
},
modules:{
// 将大量数据模块化
// 比如淘宝中 用户信息分为1个模块,订单信息分为1个模块。。。。。
}
})
[3]导出
export default store;
[4]挂载
import store from '@/store/index.js';
new Vue({
router,
store, //将vuex挂在到根实例
render: h => h(App),
}).$mount('#app')
- 挂载到路由根实例我们就可以在全局通过store获取到仓库的数据,在每个vue组件中通过this.$store获取仓库数据;
vuex的核心概念
注:vuex的5个核心概念都是对象
;
[1]state
作用:存储共享数据;
语法
state:{
变量名:值
}
获取state中的数据
-
[1] 直接通过点语法获取仓库中的数据
this.$store.state.属性名;
-
[2] 使用getters获取仓库中的数据
this.$store.getters.方法名
修改里面的数据
-
[1]直接通过点语法修改仓库里面的数据(不推荐)
this.$store.state.属性名=值;
-
[2]使用mutations里面的方法同步修改数据
this.$store.commit('mutations中的方法名',参数)
-
[3]使用actions异步修改state中的数据(还是通过mutations去修改)
this.$store.dispatch('actions中的方法名',参数)
[2]mutations
作用
mutations
的作用是同步
操作state数据。同步操作数据是操作共享数据的唯一途径 -> 其实说同步是操作共享数据的唯一途径是一种规范(其实可以直接操作,但是很不规范,并且不使用mutations的话,时间戳中并不会显示该记录)
语法-定义方法
mutations中的方法有一个固定的参数—>state
mutations:{
方法名(state,参数){
// 代码
}
语法-调用方法
通过commit
调用mutations中的方法操作共享数据
this.$store.commit('方法名', 参数)
[3]actions
作用:异步操作数据;
语法-定义方法
actions的方法有一个固定的参数—>store
actions:{
方法名(store,参数){
//代码
}
语法-调用方法
使用dispatch异步操作数据
this.$store.dispatch('方法名',参数)
[4]getters
作用:获取state中的数据
语法-定义方法
getters中的方法存在两个默认的参数—> state
,getters
getters:{
方法名(state,getters){
return 获取的state中的值
}
}
语法-调用方法
其实getters本质就是vuex的计算属性
,因此该方法直接在页面中当作属性使用即可!
this.$store.getters.方法名
什么时候使用getters获取数据,什么时候直接获取数据?
获取state中的数据有两种方法
- 方法1: 直接获取state中的数据
this.$store.state.属性名
- 方法2: 使用getters获取state中的数据
this.$store.getters.方法名
那使用场景是什么呢?
- 若是需要
依赖state中一个或者多个值产生一个新的值
就使用getters.- 因为getters本质为计算属性
存在缓存
- 因为getters本质为计算属性
- 若是仅仅需要state中的某个值就直接获取
传递参数
计算属性是不允许传递参数的,若是我们想要传递参数需要进行封装
getters:{
getinfo(){
return (info)=>{
// 逻辑处理
}
}
}
[5]module
Vuex允许我们将store分隔成模块(module),每个模块拥有自己的state,mutation,action,getter,甚至是嵌套子模块
语法
const user = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const play = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
user,
play
}
})
若是将store分隔为多个模块,Vuex核心概念使用语法会发生变化
子模块state
子模块中的state必须为一个函数
语法
state:()=>{
return{
// 存储数据
}
}
子模块mutations
语法-定义方法
语法与之前相同,只是方法中的state是子模块的
state
mutations:{
方法名(state,参数){
// 代码
}
语法-调用方法
调用时需要拼接模块名:this.$store.commit(‘模块名/方法名
’, 参数)
子模块actions
语法-定义方法
语法与之前相同,只是在第一个参数store表示的是子模块的
store,并在store中存在一个属性 rootState
为根节点的状态
actions:{
方法名(store,参数){
//代码
}
语法-调用方法
调用时需要拼接模块名:this.$store.dispatch(‘模块名/方法名
’,参数)
子模块getters
语法-定义方法
getters中的方法存在三个默认的参数—> state,getters,rootState,其中rootState
为子模块独有参数
getters:{
方法名(state,getters,rootState){
return 获取的state中的值
}
}
语法-调用方法
调用时需要拼接模块名: this.$store.getters['模块名/方法名']
举例说明-不使用module
需求:在登录接口中获取用户信息,然后将其保存在vuex中,在多个页面使用用户信息。
实现-页面中
async toLogin(){
// 异步获取用户信息,同步操作用户信息
await this.$store.dispatch('login', {
email: 'suntao@weiche.cn',
password: '000000'
})
// [3] 在页面中使用数据
console.log('使用userInfo', this.$store.state.userInfo.name) // '超级管理员'
},
实现-store中
const store = new Vuex.Store({
state:{
userInfo:{}
},
mutations:{
SET_USERINFO(state, info){
state.userInfo = info
}
},
actions:{
// [1] 异步获取数据
login({ commit }, params){
return new Promise((resolve,reject)=>{
request.post('/login', params).then( res=> {
// [2] 同步修改数据
commit('SET_USERINFO', res.data.user_details)
resolve()
}).catch(err=>{
reject(err)
})
})
}
},
})
举例说明-使用module
3.vuex核心概念中的mapxxx属性
[1]Vuex中的mapState属性
[1]步骤
在组件中的使用步骤:
- [1]在组件中导入mapState;
import {mapState} from 'vuex'
;- [2]在
计算属性中
声明:
- 全局模块声明:
...mapState(['state中的属性名'])
- 子模块中声明:
...mapState(‘模块名’,['state中的属性名'])
- [3]在组件中要想使用state中的数据就可以
直接通过属性名使用
了(和data中的数据使用方式相同—结构中:属性名)
[2]原理:
//使用state中的userInfo属性
computed:{
...mapState(['userInfo'])
}
// 底层代码
computed:{
userInfo(){
return this.$store.userInfo;
}
}
[3]举例说明
//1.导入mapState
import { mapState } from 'vuex'
// 2.使用mapSTate
...mapState(['userInfo'])
// 原理
// userInfo(){
// return this.$store.state.userInfo;
// }
//3.在页面上使用用户数据
[2]vuex中的mapGetters属性
`在组建中使用步骤
- 1.在组件中导入mapGetters:
import {mapGetters} form 'vuex'
- 2.在计算属性中定义:
- 全局模块中定义:
...mapGetters(['getters中的方法名'])
- 子模块中定义:
...mapGetters('模块名', ['getters中的方法名'])
- 3.使用
- 在组件中要想使用getters中的方法(相当于计算属性)就可以
直接通过方法名使用
了(和data中的数据使用方式相同—结构中:this.方法名;实例化对象中·:属性名)
[3]vuex中的mapMutations属性
-
[1]在组件中导入
import { mapMutations} from 'vuex'
-
[2]在methods中定义
- 全局模块
...mapMutations(['mutations中的方法名'])
- 子模块
...mapActions('模块名', ['mutations中的方法名'])
- 全局模块
-
[3] 使用
- 和methods中定义的方法使用方式相同
[4]vuex中的mapActions属性
- [1]在组件中导入
import { mapActions} from 'vuex'
- [2]在methods中定义
- 全局模块中定义
...mapActions(['actions中的方法名']),
- 子模块中定义
...mapActions('模块名',['actions中的方法名']),
- 全局模块中定义
- [3] 使用
- 和methods中定义的方法使用方式相同
4.store的三种使用方式
- 在vue的实例化对象中使用:this.$store;
- 在vue组件的html结构中使用:$store;
- 在js文件中使用:import store form ‘路径’ ;store;
注:路由的使用相同;
5.vuex使用场景
- 存储一些共有信息
- eg:用户信息—很多页面都使用用户信息
- 用于组件之间传值
- eg:兄弟组件传值