vuex

基础

作用：

对vue应用中多个组件的共享状态进行集中式的管理(读/写)

• 包含的内容

state

- 所有状态数据
- 一般要对数据进行初始化

集中所有数据的对象

1. vuex管理的状态对象
2. 它应该是唯一的

getters

- 所有只读计算属性
- 一定会依赖于某个状态数据

包含了只用来读取的计算数据

1. 包含多个计算属性(get)的对象
2. 谁来读取: 组件中: $store.getters.xxx

actions

- 包含 n 个间接更新的函数对象
- 一般需要发送请求

用来间接更新数据的方法对象,包含n个方法，来间接更新数据,通常会做异步操作，将操作完成的数据交给mutations函数更新

1. 包含多个事件回调函数的对象
2. 通过执行: commit()来触发mutation的调用, 间接更新state
3. 谁来触发: 组件中: $store.dispatch(‘action名称’, data1) // ‘zzz’
4. 可以包含异步代码(定时器, ajax)

• actions函数第一个参数是一个对象：store --> 内部有dispatch/commit/state等
  
  

• actions函数第二个参数：外面调用dispatch传递过来的数据

 // 因为action函数啥也没做
 // 直接调用mutation函数
 this.$store.commit("INCREMENT", this.num);	

mutations

- 包含 n 个直接更新的函数对象
- 一般直接对 state 数据进行修改（不应该在做其他额外操作了，比如发送请求）

• 用来直接更新数据的方法对象
• 直接对数据进行操作（数据操作后会更新state，从而组件会重新渲染）
• mutation函数的数量：看要对数据更新的操作的几种方式
  mutation函数第一个参数：state --> 所有状态数据
  mutation函数第二个参数：num --> 就由上一步actions负责传递过来

1. 包含多个直接更新state的方法(回调函数)的对象
2. 谁来触发: action中的commit(‘mutation名称’)
3. 只能包含同步的代码, 不能写异步代码

mutation-types

- mutation 函数的类型常量模块

store对象

store对象中包含读取数据和更新数据的方法

1. 所有用vuex管理的组件中都多了一个属性$store, 它就是一个store对象

const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
});

export default store;

映射store

mapState 映射vuex状态数据到组件data数据中
mapGetters 映射vuex getters数据到组件computed数据中
mapActions 映射vuex actions函数到组件methods中
mapMutations 映射vuex mutations函数到组件methods中

import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

methods: {
  ...mapActions(["incrementIfOdd", "incrementAsync"]),
  ...mapMutations(["INCREMENT", "DECREMENT"]),
  increment() {
	  // 调用的就是mutation函数
	  this.INCREMENT(this.num);
  },
}

computed: {
  ...mapState(["count"]),
  ...mapGetters(["oddOrEven"]),
},

mapState

• 映射vuex状态数据到组件data数据中

 mapState(["count"])的返回值是一个对象

 {
   count() {
     return this.$store.state.count
   }
 }

mapGetters

• 映射vuex getters数据到组件computed数据中

mapActions

• 映射vuex actions函数到组件methods中

mapMutations

• 映射vuex mutations函数到组件methods中

vuex 工作流程

读取

- 组件直接调用 this.$store.state.xxx
  - mapState(['count'])
- 组件直接调用 this.$store.getters.xxx
  - mapGetters(['oddOrEven'])

更新

- 组件调用 this.$store.dispatch('action 函数名称', 数据)
  - mapActions(['increment'])
- 触发某个 actions 函数，actions 函数中发送请求，请求成功调用 commit('mutation 函数名称', 数据)
- 触发某个 mutations 函数，mutations 函数就会对 state 数据进行直接修改
- 数据一旦更新，因为响应式的原因，所以用户界面也会发生变化

- 组件调用 this.$store.commit('mutation 函数名称', 数据)
  - mapMutations(['INCREMENT'])
- 触发某个 mutations 函数，mutations 函数就会对 state 数据进行直接修改
- 数据一旦更新，因为响应式的原因，所以用户界面也会发生变化

思考：

• 状态数据要不要定义在 vuex 中？
  • 看数据是否有多个组件要使用（显示、操作）
• 要对 vuex 的数据进行操作，要不要 actions？
  • 要数据需不需要进一步处理（操作：发送请求…）
• mutation 函数要定义多少个？
  • 看要对数据进行几种类型的操作

流程图

actions函数内部调用commit触发某个mutation函数
actions里面不会修改数据,只负责请求一些异步数据
发送请求,异步操作 要对数据的操作都放在actions中
在vuex中,dispatch触发的是Actions函数,修改数据是mutations直接修改state数据,state数据是双向绑定的,所以它变化页面也变化

使用

yarn add vuex

yarn add vuex

基本结构

src => store => index.js

import Vue from "vue";
import Vuex from "vuex";

// 安装插件,Vuex也是vue的一个插件所以需要安装
Vue.use(Vuex);

/* 集中管理所有数据的对象 */
const state = {};

/* 间接更新数据的方法对象  包含n个方法来间接更新数据 */
// 通常会做异步操作,将操作完成的数据交给mutations函数更新
const actions = {};

/* 用来直接更新数据的方法对象 */
// 直接对数据进行操作(数据操作后会更新state,从而组件会重新渲染)
const mutations = {};

// store对象中包含读取数据和更新数据的方法
const store = new Vuex.Store({
  state,
  actions,
  mutations
});

// 最终组件要用的就是store
export default store;

引入

import Vue from "vue";
import App from "./App.vue";
// 在main.js中引入store
import store from "./store/index";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  // 应用store
  store
}).$mount("#app");

在组件中定义方法

• 调用dispathch

 increment() {
   // 更新vuex数据 --> 页面中要调用dispatch函数
   this.$store.dispatch('increment', this.num);
 },

组件中的this

actions中的参数

• actions函数参数,第一个参数是一个对象,第二个参数是外面调用dispatch传递过来的数据
  

vuex调试工具

getters

组件操作vuex

  组件操作vuex：
    1. 读
      this.$store.state.xxx
    2. 写
      this.$store.dispatch(触发的action函数名称, 传递给action的数据);

命名空间

• 之前
• 
  -现在
  
• 使用