Vuex

最新推荐文章于 2024-05-30 22:13:17 发布

崔世勋

最新推荐文章于 2024-05-30 22:13:17 发布

阅读量167

点赞数

分类专栏： Vue

Vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

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

每一个Vuex应用的核心就是store(仓库)。 “store”基本上就是一个容器，它包含着你的应用中大部分的状态（state）.Vuex和单纯的全局对象有以下两点不同：

（1） Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。

（2）你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交mutation。这样使我们可以方便的跟踪每一个状态的变化。

核心概念

1、State

Vuex使用单一状态树，即每个应用将仅仅包含一个store实例。

Vuex通过store选项，提供了一种机制将状态从根组件注入到每个子组件中（需要调用Vue.use(Vuex)）,

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

（1）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的子节点名称相同时
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

（2）对象展开运算符

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

2、Getter

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

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)
    }
  }
})

（1）通过属性访问

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

（2）通过方法访问

也可以通过让getter返回一个函数，来实现给getter传参。在对store里的数组进行查询时非常有用。

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

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

（3）mapGetters辅助函数

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

3、Mutation

Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回函数（handler）。这个回调函数就是我们进行状态更改的地方。

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

要唤醒一个mutation handler，你需要以相应的type调用store.commit方法：

store.commit('increment')

（1）payload

可以向store.commit传入额外的参数

mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

大多数情况下， payload应该是一个对象。

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

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

（2）对象风格的提交方式

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

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

当使用对象风格的提交方式，整个对象都作为payload传递给mutation函数。

（3）mutation必须是同步函数

（4）在组件中提交Mutation

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

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

4、Action

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

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

Action函数接受一个与store实例具有相同方法和属性的context对象。

（1）分发action

store.dispatch('increment')

actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求，然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

（2）在组件中分发action

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

（3）组合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(() => {
  // ...
})

在另一个action中也可以：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

如果我们利用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())
  }
}

5、module

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

为了解决以上问题， Vuex允许我们将store分隔成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

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

（1）模块的局部状态

对于模块内部的action，局部状态通过context.state暴露出来，根节点状态则为context.rootState

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

对于模块内部的getter，根节点状态会作为第三个参数暴漏出来：

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

（2）命名空间

默认情况下，模块内部的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 () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

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

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

          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

如果你希望使用全局state和getter， rootState和rootGetter会作为第三和第四参数传入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) { ... }
    }
  }
}

若需要在带命名空间的模块注册全局action，可添加root:true，并将这个action的定义放在函数handler中。

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

这样所有绑定都会自动将该模块作为上下文，还可以通过使用createNamespacedHelpers创建基于某个命名空间辅助函数。

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

项目结构

示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

Vuex并不限制你的代码结构，但它规定了一些需要遵守的规则：

1、应用层级的状态应该集中到单个store对象中。

2、提交mutation是更改状态的唯一方法，并且这个过程是同步的。

3、异步逻辑都应该封装到action里面。

只要遵守以上规则，如何组织代码随便。如果你的store文件太大，只需将action、mutation和getter分割到单独的文件。

热重载

使用webpack的Hot Module Replacement API， Vuex支持在开发过程中热重载mutation、module、action和getter。你也可以在Browserify中使用browserify-hmr插件。

对于mutation的模块，你需要使用store.hotUpdate()方法：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'

Vue.use(Vuex)

const state = { ... }

const store = new Vuex.Store({
  state,
  mutations,
  modules: {
    a: moduleA
  }
})

if (module.hot) {
  // 使 action 和 mutation 成为可热重载模块
  module.hot.accept(['./mutations', './modules/a'], () => {
    // 获取更新后的模块
    // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
    const newMutations = require('./mutations').default
    const newModuleA = require('./modules/a').default
    // 加载新模块
    store.hotUpdate({
      mutations: newMutations,
      modules: {
        a: newModuleA
      }
    })
  })
}