1、vuex的概念
Vuex是一个专门为Vue.js应用程序开发做状态管理的.
他采用集中式存储管理应用的所有组件的状态, 并以响应的规则保证状态以一种可预测的方式发生变化.每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
大白话：vue的全局仓库，用来存放数据
vuex质是单例模式的设计思想
- 将共享的状态抽取出来, 交给大管家, 进行统一管理
- 之后, 每一个视图, 按照规定好的规则, 执行访问或修改等操作.
- 这就是vuex背后的思想.
2、vuex的组成
state-----数据仓库
getter------用户获取数据
mutation---------用户修改数据
action-------用户提交mutation
3、vuex的安装
第一步: 添加vuex代码文件夹
在src目录下新建/src/store/index.js. 通常, vuex都放在store文件夹里面. 然后在store下面创建一个文件index.js
第二步: 在index.js文件中定义vuex组件.
vuex是一个插件, vue-router也是一个插件, 插件的使用方式都是类似的.
1: 引入vue和vuex
1. import Vue from 'vue'; 2. import Vuex from 'vuex';
2: 安装vuex
Vue.use(Vuex);
3: 创建vuex对象
1. const store = new Vuex.Store({ 2. state: { 3. }, 4. mutations: { 5. }, 6. actions: { 7. }, 8. getters: { 9. }, 10. modules: { 11. } 12. })
在store中定义了5个对象, 这5个对象是固定的. 每个对象的含义是什么呢? 后面在详细说.
4: 导出vuex
export default store;
5: 在main.js中引入vuex
1. import Vue from 'vue' 2. import App from './App' 3. import router from './router' 4. import store from './store/index'; 5. 6. Vue.config.productionTip = false 7. 8. /* eslint-disable no-new */ 9. new Vue({ 10. el: '#app', 11. store, 12. router, 13. render: h => h(App) 14. })
4、Vuex使用的场景
1. 不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的 store 模式。
2. 适用于：中大型单页应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题
5、 引入vuex中各属性对应的辅助函数
import {mapActions, mapState,mapGetters} from 'vuex' //注册 action 、 state 、getter
6、State单一状态树
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
比如我们的个人信息,社保信息存在社保系统里, 公积金信息存在公积金系统里, 医保信息存在医保系统里. 这有有好处也有坏处, 好处是信息更安全,彼此隔离; 坏处是要是办某一件事,想要所有的信息, 就要跑很多地方取.
而单一状态树的含义就是将所有的信息都存在一个store中, 如果需要什么数据, 直接去那一个store中取就好了. 不要在系统中定义多个store, 这样不方便管理和维护.
单一状态树的含义: 在一个项目只建一个store.
