vuex的安装和使用

安装并使用vuex

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

• vuex的安装

  • 下载 vuex.js,并使用script标签在vue.js之后引入

      <script src="/path/to/vue.js"></script>
          <script src="/path/to/vuex.js"></script>
  
  

  • 使用npm 安装vuex包

      npm i vuex -g
      //全局安装vuex
  
      //通过import 引入vuex 模块
  
      import Vue from 'vue'
      import Vuex from 'vuex'
  
      Vue.use(Vuex)
  

  • 因为vuex 是依赖于promise 的，如果你支持的浏览器没有实现Promise，name需要使用一个polyfill的库，比如：ES6-promise

      //通过script标签引入promise
      <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
  
  

• vue计数应用

    new vue({
    //state
    data(){
        return {
            count:0
        }
    },
    //view
    template:'<p>{{count}}</p>',
    
    //actions
    methods:{
        increment(){
            this.count++
        }
    }
})

• 这个状态自管理应用包含以下几个部分：

  • state，驱动应用的数据源；
  • view，以声明方式将 state 映射到视图；
  • actions，响应在 view 上的用户输入导致的状态变化

    const store = new Vuex.Store({
        state:{
            count:0
        },
        
        mutations:{
            state.count++
        }
    })

现在可以通过store.state 来获取状态对象，以及通过state.commit 方法触发状态变更

    store.commit('increment')
    console.log(store.state.count)
    // -> 1

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

ps:想吐槽一下，vue和vuex的官方文档，看的我头大~~~