Vuex 是 状态管理的编程模式 + 工具库,适用于 Vue.js 编写的应用。它作为一个集中化的 store (状态存储),服务于应用中的所有组件,其中的规则保证了状态只会在可预测的方式下修改。另外,它能与 Vue 官方提供的 devtools 扩展 集成,提供高级功能,如,无需配置就可以基于时间轴调试,以及状态快照的 导入 / 导出。
如果你没有开发过大型的单页应用就立刻上 Vuex,可能会觉得繁琐然后排斥,这是很正常的 —— 如果是个简单的应用,大多数情况下,不用 Vuex 还好,你要的可能就是个简单的 全局事件总线。不过,如果你构建的是一个 中大型 单页应用,当你在考虑如何更好的在 Vue 组件外处理状态时,Vuex 自然就是你的下一步选择。Redux 的作者有一句话说的不错:
Flux libraries are like glasses: you’ll know when you need them.(Flux 库正如眼镜:当你需要它们的时候,你就懂了。)
核心概念
state ( store 的 data)
存放整个应用状态,作为应用的唯一数据源驱动UI视图的更新
尽量初始化详细的state数据
组件中直接访问
computed: { count () { return this.$store.state.count } }
使用工具函数 mapSate 访问
用于将独立的state数据映射到组件的 computed 属性中
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 } }) }
actions ( store 的 methods)
不改变状态,只提交(commit) mutation。
可以包含任意异步操作。
组件中直接访问
mounted(){ this.$store.dispatch('getUserData') }
工具函数 mapActions 访问
用于将action方法映射到组件的 methods 中
import { mapActions } from 'vuex'export default { // ... methods: { ...mapActions([ 'increment' // 映射 this.increment() 到 this.$store.dispatch('increment') ]), ...mapActions({ add: 'increment' // map this.add() to this.$store.dispatch('increment') }) } }
mutations ( store 的 methods)
定义了 同步 改变 state 的唯一方法
在store中,实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation
组件中使用
methods:{ add(){ this.$store.commit('ADD_NUMBER',{num: 1}) } }
使用工具函数 mapMutations
将mutation映射到组件的 methods 中
import { mapMutations } from 'vuex'export default { // ... methods: { ...mapMutations({ add: 'increment' // 映射 this.add() 到 this.$store.commit('increment') }) } }
getters ( store 的 computed)
和计算属性功能相同,基于多个状态生成新的状态
组件中使用
computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } }
工具函数 mapGetters
用于将getter属性映射到组件的computed中
import { mapGetters } from 'vuex'export default { // ... computed: { // 使用对象扩展操作符把 getter 混入到 computed 中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } }
安装
直接引入
在 Vue 后面加载 vuex,它会自动安装的:
<script src="/path/to/vue.js"></script><script src="/path/to/vuex.js"></script>
NPM
npm install vuex #如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
使用(这里提供的是个人使用方案,可能有不足,望留言提点)
创建store文件夹,在文件夹内新建index.js、actions.js、getters.js、mutations.js,具体内容如下:
index.js
import Vue from 'vue'import Vuex from 'vuex'import * as getters from './getters'import * as actions from './actions'import * as mutations from './mutations'Vue.use(Vuex)//如果使用全局的 script 标签,则无须如此(手动安装)。const state = { count: 0, history: [] }const store = new Vuex.Store({ state, getters, actions, mutations })export default store
main.js
import Vue from 'vue'import App from './App'import router from './router'import store from './store'new Vue({ el: '#app', router, store, render: h => h(App) })
actions.js
//不改变状态,只提交(commit) mutation。export const increment = ({ commit }) => commit('increment')export const decrement = ({ commit }) => commit('decrement')export const incrementIfOdd = ({ commit, state }) => { if ((state.count + 1) % 2 === 0) { commit('increment') } }export const incrementAsync = ({ commit }) => { setTimeout(() => { commit('increment') }, 1000) }
getters.js
//和计算属性功能相同,基于多个状态生成新的状态export const count = state => state.count //当前数值const limit = 5export const recentHistory = state => { //近期历史记录 const end = state.history.length const begin = end - limit < 0 ? 0 : end - limit return state.history .slice(begin, end) .toString() .replace(/,/g, ', ') }
mutations.js
//用于操作state的唯一途径export const increment = state => { state.count++; state.history.push('increment'); }export const decrement = state => { state.count--; state.history.push('decrement'); }
到这里vuex的基本准备都做完了,可以开始在组件内调用了。
Hello.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>{{count}}</h2> <h3>最近记录:{{recentHistory}}</h3> <button @click="increment">加1</button> <button @click="decrement">减1</button> <button @click="incrementIfOdd">奇数加1</button> <button @click="incrementAsync">异步加1</button> </div></template><script>import { mapGetters, mapActions } from 'vuex'export default { name: 'hello', data() { return { msg: 'A Vuex Example Project !' } }, computed: mapGetters([ 'count', 'recentHistory' ]), methods: mapActions([ 'increment', 'decrement', 'incrementIfOdd', 'incrementAsync' ]) }</script>
源码地址:https://github.com/lion1ou/vuex-example.git
作者:lion1ou
链接:https://www.jianshu.com/p/92b70dcb2410