vuex

最新推荐文章于 2024-03-02 15:16:21 发布

hizyk

最新推荐文章于 2024-03-02 15:16:21 发布

阅读量109

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/xsvklftj/article/details/110292853

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

传统方法的缺陷以及vuex的优点

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

问题一：多个视图依赖于同一状态
问题二：来自不同视图的行为需要变更同一状态

对于问题一：传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力

对于问题二：我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝

以上的这些模式非常脆弱，通常会导致无法维护的代码，VUEX把组件的共享状态抽取出来，以一个全局单例模式管理，在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为

基本原理

每一个 Vuex 应用的核心就是 store（仓库），store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation

基本使用

若使用vue-cli创建项目，且在创建时选择了vuex组件，则vue-cli会自动创建store目录，以及store目录下的index.js文件，并自动配置vuex到项目中，可以直接使用

手动配置

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)	//若想将store对象直接注入到根实例中，必须先执行Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

// main.js
import Vue from 'vue'
import store from './store'	//将整个store目录引入，也可以import store from './store/index.js'引入单文件

new Vue({
  el:'app',
  /*
  ES6简写法，原为store:store，是一种从根组件向所有子组件，以store选项的方式注入该store的机制
  注入后可以在任意子组件中使用this.$store访问store对象
  */
  store,
  //...
})

组件中使用

在任意组件中使用this.$store来访问vuex对象，例如使用this.$store.state.count来访问state中定义的count属性

注意：在组件的方法中使用this.$store时，不要使用箭头函数（因为箭头函数的this指向其上下文，而function函数的this指向调用它的对象）

建议使用计算属性来与vuex交互

核心概念

State

单一状态树

Vuex 使用单一状态树：用一个对象就包含了全部的应用层级状态，每个应用将仅仅包含一个 store 实例

单状态树和模块化并不冲突

存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹 (plain) 的

纯粹 (plain) 对象：由new Object，或 { } 创建的对象

！！在 Vue 组件中获得 Vuex 状态

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,	//此处count使用计算属性
  computed: {
    count () {
      //每当 this.$store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的DOM
      return this.$store.state.count;
    }
  }
}

mapState 辅助函数

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

对象展开运算符

mapState 函数返回的是一个对象。若要将它与局部计算属性混合使用，应使用对象展开运算符

computed: {
  localComputed () {...},	//原有的不使用store的计算属性
  ...mapState({		// '...'为对象展开运算符，将此对象混入到外部对象中
    // ...
  })
}

对象展开运算符…：

let a = [1,2,3]; let b = [0, …a, 4]; 则 b = [0,1,2,3,4]

Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

Getter 接受 state 作为其第一个参数：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

通过属性访问

Getter 会暴露为 store.getters 对象，你可以以属性的形式在组件中访问这些值：

this.$store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作为第二个参数：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

通过方法访问

你也可以通过让 getter 返回一个函数，来实现给 getter 传参

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

export default new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

你不能直接调用一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

注意：mutation 必须同步执行

提交载荷

你可以向 store.commit 传入额外的参数，即 mutation 的载荷，荷载可以是一个值，也可以是一个对象

// ...
mutations: {
  increment (state, n) {	//荷载是一个值
    state.count += n
  },
  objincrement (state, payload) {	//荷载是一个对象
    state.count += payload.amount
  }
}

store.commit('increment', 10);		//传入值
store.commit('objincrement', {amount: 10});		//传入对象

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
  type: 'increment',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变

在组件中使用 Mutation

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）

Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态
Action 可以包含任意异步操作

让我们来注册一个简单的 action：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters（注意 context 对象不是 store 实例）

//实践中，我们会经常用到 ES2015 的参数解构来简化代码
actions: {
  increment ({ commit }) {		//相当于取实参的commit属性
    commit('increment')
  }
}

分发 Action

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

mutation 必须同步执行，Action 不受约束！我们可以在 action 内部执行异步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})
// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

在组件中使用 Action

你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）

！！组合 Action

Action 通常是异步的，store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

现在你可以：

store.dispatch('actionA').then(() => {
  // ...
})

如果利用 async / await，可以如下组合 action：

// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}
const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

export default new Vuex.Store({
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
//store.state.a === moduleA.state

模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象

const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
对于模块内部的 getter，根节点状态会作为第三个参数暴露出来

const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  },
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

命名空间

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块

当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,		//启动命名空间，注意该行是写在模块内的

      // 模块内容（module assets）
      state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // 使用store.getters['account/isAdmin']访问
      },
      actions: {
        login () { ... } // 使用store.dispatch('account/login')访问
      },
      mutations: {
        login () { ... } // 使用store.commit('account/login')访问
      },

      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: () => ({ ... }),
          getters: {
            profile () { ... } // 使用store.getters['account/profile']访问
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,		//嵌套命名空间

          state: () => ({ ... }),
          getters: {
            popular () { ... } // 使用store.getters['account/posts/popular']访问
          }
        }
      }
    }
  }
})

在带命名空间的模块内访问全局内容

如果你希望使用全局 state 和 getter，rootState 和 rootGetters 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action

若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可

modules: {
  foo: {
    namespaced: true,
    getters: {
      // 在这个模块的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // 'foo/someOtherGetter'
        rootGetters.someOtherGetter // 'someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // 'foo/someGetter'
        rootGetters.someGetter // 'someGetter'

        dispatch('someOtherAction') // 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // 'someOtherAction'

        commit('someMutation') // 'foo/someMutation'
        commit('someMutation', null, { root: true }) // 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}