Vue-Vuex状态管理(一)

Vuex(https://vuex.vuejs.org/zh/)是一个专门为vue.js应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的方式发生改变。

当应用遇到多组件共享状态时,很容易出现多个视图依赖同一状态、来自不同视图的行为需要变更同一状态等问题,对于此类问题,vuex很好地对其进行了解决,通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间饿独立性,使得代码更结构化且易维护。

vuex适用于大型单页应用,如果是小型应用,加入vuex可能会导致适用更加繁琐冗余。

  Vuex就犹如网络上的交换机,对各种组件(电脑)进行管理,并且可以配置规则让组件根据规则进行变化。             

官方调试工具:devtools extension (https://github.com/vuejs/vue-devtools)

安装:

直接下载:
    https://unpkg.com/vuex         (最新版)
    https://unpkg.com/vuex@2.0.0       (指定版本)
在vue中引入:
    <script src="/path/to/vue.js"></script>
    <script src="/path/to/vuex.js"></scirpt>
npm:
    npm install vuex --save
yarn:
    yarn add vuex
在模块化打包系统(除了全局scirpt标签引入)中,必须使用Vue.use()来安装: import Vue
from 'vue' import Vuex from 'vuex' Vue.use(Vuex)

promise(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises)

由于vuex依赖promise,当浏览器不支持promise时,可以使用polyfill的库,官方文档中使用es6-promise(https://github.com/stefanpenner/es6-promise)来进行示例

es6-promise安装
    cdn引入:
        <script src="https://cdn.jsdelivr.net/npm/es6-pormise@4/dist/es6-promise.auto.js"></script>
    npm:
        npm install es6-promise --save
    yarn:
        yarn add es6-promise
    使用import导入到使用vuex的地方:
        import 'es6-promise/auto'

  

原文地址:https://www.cnblogs.com/miao91/p/13625577.html