vuex--共享状态(数据)管理

使用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
1
2
3

[2]初始化vuex实例

const store=new Vuex.Store({
  state:{
    // 存储vuex的共享数据
  }，
  mutations:{
  	// 同步操作state中的数据
  },
  actions:{
    // 异步操作state中的数据                    
  }，
  getters:{
    // 获取state中的数据                     
  }，
  modules:{
    // 将大量数据模块化 
    // 比如淘宝中 用户信息分为1个模块，订单信息分为1个模块。。。。。
   }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

[3]导出

export default store;
1

[4]挂载

import store from '@/store/index.js';
new Vue({
  router,
  store, //将vuex挂在到根实例
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6

• 挂载到路由根实例我们就可以在全局通过store获取到仓库的数据，在每个vue组件中通过this.$store获取仓库数据；

vuex的核心概念

注：vuex的5个核心概念都是对象；

[1]state

作用：存储共享数据；

语法

 state:{
   变量名：值
 }
1
2
3

获取state中的数据

• [1] 直接通过点语法获取仓库中的数据

    this.$store.state.属性名；
  1

• [2] 使用getters获取仓库中的数据

    this.$store.getters.方法名
  1

修改里面的数据

• [1]直接通过点语法修改仓库里面的数据(不推荐)

    this.$store.state.属性名=值；
  1

• [2]使用mutations里面的方法同步修改数据

    this.$store.commit('mutations中的方法名'，参数)
  1

• [3]使用actions异步修改state中的数据(还是通过mutations去修改)

   this.$store.dispatch('actions中的方法名'，参数)
  1

[2]mutations

作用

mutations的作用是同步操作state数据。同步操作数据是操作共享数据的唯一途径 -> 其实说同步是操作共享数据的唯一途径是一种规范(其实可以直接操作，但是很不规范，并且不使用mutations的话，时间戳中并不会显示该记录)

语法-定义方法

mutations中的方法有一个固定的参数—>state

mutations:{
  方法名(state,参数){
    // 代码
}
1
2
3
4

语法-调用方法

通过commit调用mutations中的方法操作共享数据

  this.$store.commit('方法名', 参数)
1

[3]actions

作用：异步操作数据;

语法-定义方法
actions的方法有一个固定的参数—>store

  actions:{
    方法名(store,参数){
      //代码
  }
1
2
3
4

语法-调用方法
使用dispatch异步操作数据

 this.$store.dispatch('方法名'，参数)
1

[4]getters

作用:获取state中的数据

语法-定义方法

getters中的方法存在两个默认的参数—> state,getters

getters:{
 方法名(state,getters){
   return 获取的state中的值
  }
}
1
2
3
4
5

语法-调用方法

其实getters本质就是vuex的计算属性,因此该方法直接在页面中当作属性使用即可！

 this.$store.getters.方法名
1

什么时候使用getters获取数据，什么时候直接获取数据？

获取state中的数据有两种方法

• 方法1: 直接获取state中的数据

    this.$store.state.属性名
  1

• 方法2: 使用getters获取state中的数据

     this.$store.getters.方法名
  1

那使用场景是什么呢？

• 若是需要依赖state中一个或者多个值产生一个新的值就使用getters.
  • 因为getters本质为计算属性存在缓存
• 若是仅仅需要state中的某个值就直接获取

传递参数

计算属性是不允许传递参数的，若是我们想要传递参数需要进行封装

getters:{
  getinfo(){
    return (info)=>{
      // 逻辑处理
    }
  }
}
1
2
3
4
5
6
7

[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
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

若是将store分隔为多个模块，Vuex核心概念使用语法会发生变化

子模块state

子模块中的state必须为一个函数
语法

state:()=>{
  return{
    // 存储数据
  }
}
1
2
3
4
5

子模块mutations

语法-定义方法
语法与之前相同，只是方法中的state是子模块的state

 mutations:{
   方法名(state,参数){
     // 代码
 }
1
2
3
4

语法-调用方法
调用时需要拼接模块名：this.$store.commit(‘模块名/方法名’， 参数)

子模块actions

语法-定义方法
语法与之前相同，只是在第一个参数store表示的是子模块的store，并在store中存在一个属性 rootState为根节点的状态

  actions:{
    方法名(store,参数){
      //代码
  }
1
2
3
4

语法-调用方法
调用时需要拼接模块名：this.$store.dispatch(‘模块名/方法名’，参数)

子模块getters

语法-定义方法

getters中的方法存在三个默认的参数—> state,getters,rootState,其中rootState为子模块独有参数

getters:{
 方法名(state,getters,rootState){
   return 获取的state中的值
  }
}
1
2
3
4
5

语法-调用方法

调用时需要拼接模块名： 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) // '超级管理员'
},
1
2
3
4
5
6
7
8
9
10

实现-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)
        })
      })
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

举例说明-使用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;
  }
}
1
2
3
4
5
6
7
8
9
10

[3]举例说明

//1.导入mapState
import { mapState } from 'vuex'

 // 2.使用mapSTate
    ...mapState(['userInfo'])
    // 原理
    // userInfo(){
    //   return this.$store.state.userInfo;
    // }
//3.在页面上使用用户数据
1
2
3
4
5
6
7
8
9
10

[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'
  1

• [2]在methods中定义

  • 全局模块

      ...mapMutations(['mutations中的方法名'])
    1

  • 子模块

      ...mapActions('模块名', ['mutations中的方法名'])
    1

• [3] 使用

  • 和methods中定义的方法使用方式相同

[4]vuex中的mapActions属性

• [1]在组件中导入

    import { mapActions} from 'vuex'
  1

• [2]在methods中定义
  • 全局模块中定义

    ...mapActions(['actions中的方法名']),
    1

  • 子模块中定义

    ...mapActions('模块名',['actions中的方法名']),
    1

• [3] 使用
  • 和methods中定义的方法使用方式相同

4.store的三种使用方式

• 在vue的实例化对象中使用：this.$store;
• 在vue组件的html结构中使用：$store;
• 在js文件中使用：import store form ‘路径’ ;store;

注：路由的使用相同；

5.vuex使用场景

• 存储一些共有信息
  • eg:用户信息—很多页面都使用用户信息
• 用于组件之间传值
  • eg:兄弟组件传值