Vuex使用

一、Vuex 概述

1.1 Vue中组件之间共享数据的方式（小范围）

1、父向子传值：v-bind 属性绑定
2、子向父传值：v-on 时间绑定
3、兄弟组件之间共享数据： EventBus

  • $on 接收数据的那个组件
  • $emit 发送数据的那个组件

1.2 Vuex概述

  • Vuex是什么
    Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享

  • 使用Vuex统一管理状态的好处
    ①能够在vuex中集中管理共享的数据，易于开发和后期维护
    ②能够高效地实现组件之间的数据共享，提高开发效率
    ③存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

  • 什么样的数据适合存储到Vuex中
    一般情况下，组件之间共享的数据，才有必要存储到 vuex 中
    对于组件中的私有数据，依旧存储在组件自身的 data 中即可

1.3 Vuex的基本使用

  • 1、安装 Vuex 依赖包
npm install vuex --save
  • 2、导入 vuex 包
// 创建 src/store/state.js
export const state = {
    userName: null,
    token: null,
    title: '',
    roles: null
}


// 创建 src/store/index.js
import {
    state
} from './state'
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)
  • 3、在 src/store/index.js 创建 store 对象
import { state } from './state'
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex);
export default new Vuex.Store({
  state: state,
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
  • 4、在 main.js 中将 store 对象挂载到 vue 实例中
import store from './store/index';

new Vue({
    router,
    store,
    el: '#app',
    render: h => h(App)
}).$mount('#app');

二、State 基本使用（共享数据存放）

state提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 state 中进行存储

//  src/store/state.js
export const state = {
    userName: null,
    token: null,
    title: '标题',
    roles: null,
    count: 0
}

2.1 组件访问 State 中数据的两种方式

2.1.1 第一种：通过 this.$store.state.全局数据名称获取

this.$store.state.全局数据名称（例如：this.$store.state.count，在模板中使用的话不需要 this）
例如:

2.1.2 第二种通过 Vuex 中的 magState 函数按需导入当前组件需要的全局数据

通过 Vuex 中的 magState 函数按需导入当前组件需要的全局数据，映射为当前组件的 computed 计算属性
例如：

三、mutations 的使用（共享数据操作，函数中不可进行异步操作）

为实现点击+1按钮，count自增+1，根据以往经验，很容易就会想到在组件的methods的处理函数中用 this.$store.state.count++ 来实现，这是不可取的，因为共享的数据，可能会在很多地方使用，如果每个组件都定义自己的处理方法，后期维护十分困难
vue中推荐在store中mutations内的函数去操作共享数据

mutations用户变更 Store 中的数据
①只能通过 mutations 变更 Store数据，不可以直接操作Store中的数据
②通过这种方式虽然操作稍微繁琐一些，但是可以集中监控所有数据的变化

export default new Vuex.Store({
  state: state,
  mutations: {
    // 函数中第一个形参永远都是自身的 state，该形参就是上面的 state 对象
    add(state) {
      state.count++
    }
  },
  actions: {
  },
  modules: {
  }
})

3.1 触发 mutations 函数的两中方式

3.1.1 第一种：this.$store.commit('函数名称')，commit的作用就是调用某个 mutations 函数
  • vuex如果分为几个模块，方法是在模块中的话，如果直接在组件中通过this.$store.commit("方法名")是获取不到，必须要在前面加上模块名，如this.$store.commit("模块名/方法名")才可以获取到

触发 mutations 时携带参数
定义 mutations 函数时定义需要的参数

// src/store/index.js
export default new Vuex.Store({
  state: state,
  mutations: {
    add(state) {
      state.count++
    },
    addN(state, step) {
      state.count +=  step
    }
  },
  actions: {
  },
  modules: {
  }
})

// Addition.vue

3.1.2 第二种：通过 mapMutations 将需要的 mutations 函数导入并映射为当前组件的 methods 方法

四、actions 使用

vuex中，mutations 函数不支持异步操作，如果在 mutations 函数中使用异步操作，会导致页面展示的数据与 state 中的数据不同步，导致出现问题

actions 用于处理异步任务

如果想通过异步操作变更数据，必须通过 actiongs ，而不能使用 mutations ，但是 actions 中还是需要通过触发 mutations 的的方式间接变更数据

4.1 actions 的使用方式

4.1.1 第一种方式: this.$store.dispatch('actions 函数')

export default new Vuex.Store({
  state: state,
  mutations: {
    add(state) {
      state.count++
    },
    addN(state, step) {
      state.count = state.count + step
    }
  },
  actions: {
    // 第一个形参永远时 context， context 可以认为 New 出来的 Store对象
    addAsync(context) {
      setTimeout(() => {
        // 在 actions 中不能直接操作 state 中的数据
        context.commit('add')
      })
    }
  },
  modules: {
  }
})

// 组件中触发 Action

注意：
1、第一个形参永远时 context， context 可以认为 New 出来的 Store对象
2、在 actions 中不能直接操作 state 中的数据，需要修改 state 中的数据，需要调用 mutations 中的函数

4.1.2 触发 actions 异步任务时携带参数

主要思路：在触发 actions 函数时携带参数，actions 函数使用形参接收到参数，在调用 mutations 函数传递过去

//  src/store/index.js
export default new Vuex.Store({
  state: state,
  mutations: {
    add(state) {
      state.count++
    },
    addN(state, step) {
      state.count = state.count + step
    }
  },
  actions: {
    // 第一个形参永远时 context， context 可以认为 New 出来的 Store对象
    addAsyncN(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }
  },
  modules: {
  }
})


// 组件中

4.1.3 第二种方式: 通过 mapAction 将需要的 actions 函数导入并映射为当前组件的 methods 方法

// src/store/index.js
export default new Vuex.Store({
  state: state,
  mutations: {
    add(state) {
      state.count++
    },
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    }
  },
  actions: {
    // 第一个形参永远时 context， context 可以认为 New 出来的 Store对象
    addAsyncN(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    },
    subAsyncN(context, step){
      setTimeout(() => {
        context.commit('subN', step)
      }, 2000)
    }
  },
  modules: {
  }
})


// 组件

五、Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据。
1、Getter 可以对 Store 中已有的数据加工之后形成新的数据，类似 vue 的计算属性
2、Store 中数据发生变化，Getter的数据也会跟着变化
3、Getter 不会修改 state 中的数据

export default new Vuex.Store({
  state: state,
  mutations: {
    add(state) {
      state.count++
    },
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    }
  },
  actions: {
  },
  modules: {
  },
  getters: {
    showNum: state => {
      return '当前Count最新的数据为: '+ state.count 
    }
  }
})

5.1 第一种访问 getters 中的数据：this.$store.getters.名称

5.2 第二种访问 getters 中的数据：mapGetters

在 computed 属性中使用 mapGetters 导入需要的 getters 数据
导入的数据就认为是组件的计算属性，可以直接在组件中使用

vuex

相关

[转]Vue CLI 3搭建vue+vuex 最全分析

vuex使用和场景案例

VUEX

vue学习---Vuex中getters的使用

vuex中actions的使用

vue学习笔记（五）--来源尚硅谷《vuex》

vue:app.vue中添加监听beforeunload事件，即当浏览器窗口关闭或刷新时删除vuex中的数据

Vuex 通俗版教程告诉你Vuex怎么用

vueX的使用

vuex中更新对象或数组的值页面不更新的问题

Vue全家桶之VueX

Vuex getters

标签