vuex的安装和使用

2019-05-16 本文已影响0人夕禾口

安装并使用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的官方文档，看的我头大~~~

vuex的安装和使用

安装并使用vuex

猜你喜欢

热点阅读