Vuex

阅读数:192 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

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

使用Mutation改变状态的好处是，集中的一个位置对状态修改，不管在什么地方修改，都可以追踪到状态的修改，可以实现高级的time-travel调试功能。

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

vue组件传递数据的方式总结

一、props/emits(父子) http://1024s.top/blog/detail?blogId=26726 二、children/parent（父子） 1、$parent 按照dom的

vue新的状态管理器Pinia

一、概述 Pinia是为vue开发的一个全新的状态管理器。 1、vuex State、Getters、Mutations（同步）、Actions（异步） Vuex4用于vue3 Vue3用于vue2

秒吧学习

Vuex

分类

正文

一、概述

二、核心概念

项目结构

三、热重载

相关推荐

vue组件传递数据的方式总结

vue新的状态管理器Pinia

Vuex

分类

正文

一、概述

二、核心概念

项目结构

三、热重载

相关推荐

vue组件传递数据的方式总结

vue新的状态管理器Pinia

提示信息