一、什么是 Vuex
1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
2、Vuex 采用集中式存储和管理应用中所有组件的状态
3、Vuex 应用的核心是 store(仓库)-- 包含 state(组件中的共享状态)和 mutations(改变状态的方法)
二、Vuex 的安装
1、在项目根目录终端引入:
npm install vuex --save
2、在 main.js 中加入:
import store from './store'
三、Vuex 核心概念
1、State
state 可以看作是所有组件的 data,用于保存所有组件的公共数据。
2、Getters
getters 可以看作是所有组件的 computed 属性,getters 的返回值会根据它的依赖被缓存起来,只有当它的依赖值发生改变才会被重新计算。
3、Mutations
mutations 可以看作是 store 中的 methods,其中保存着更改数据的回调函数。
4、Actions
actions 类似于 mutations,区别在于:
- actions 提交的是 mutations 而非直接变更状态
- actions 中可以包含异步操作,而mutations 中不允许出现异步
5、Modules
由于使用单一状态树,当应用变得非常复杂时,store 对象会变得相当臃肿,Vuex 允许将 store 分割成模块(module)。每个模块拥有自己的 state、mutations、actions、getters、甚至是嵌套子模块——从上至下进行同样方式的分割:
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 的状态
四、Vuex 的使用
1、Vuex 获取 store 数据
通过 store.state 来获取状态对象,示例:
store.js 文件:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { num: 1 }, mutations: { changeFunction (state, num) { state.num++ } } })
main.js 文件:
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
views/demo.vue 文件:
<template> <div> <p>{{msg}}</p> <button @click="getNum">getNum</button> </div> </template> <script> export default { data () { return { msg: '0' } }, methods: { getNum () { this.msg = this.$store.state.num } } } </script>
运行效果:
2、Vuex 修改 store 数据
通过 store.dispatch 方法触发状态变更,示例:
store.js 文件:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { num: 1 }, mutations: { changeFunction (state, num) { state.num++ } }, actions: { changeNum ({ commit }, obj) { commit('changeFunction', obj) } } })
main.js 文件:
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
views/demo.vue 文件:
<template> <div> <p>{{msg}}</p> <button @click="getNum">getNum</button> <button @click="changeNum">changeNum</button> </div> </template> <script> export default { data () { return { msg: '0' } }, methods: { getNum () { this.msg = this.$store.state.num }, changeNum () { this.$store.dispatch('changeNum', 100000) this.msg = this.$store.state.num } } } </script>
运行效果: