vuex从入门到精通

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

import Vue from 'vue';
import Vuex from 'vuex';

2: 安装vuex

 Vue.use(Vuex);

3: 创建vuex对象

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

在store中定义了5个对象, 这5个对象是固定的. 每个对象的含义是什么呢? 后面在详细说.

4: 导出vuex

export default store;

5: 在main.js中引入vuex

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

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.