阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Vuex 教程

    Vuex 是什么?

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

    什么是“状态管理模式”?

    让我们从一个简单的 Vue 计数应用开始:

    new Vue({
      // state
      data () {
        return {
          count: 0
        }
      },
      // view
      template: `
        <div>{{ count }}</div>
      `,
      // actions
      methods: {
        increment () {
          this.count++
        }
      }
    })
    

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

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

    安装、使用 vuex

    首先我们在 vue.js 2.0 开发环境中安装 vuex :

    npm install vuex --save
    

    然后 , 在 main.js 中加入 :

    import vuex from 'vuex'
    Vue.use(vuex);
    var store = new vuex.Store({//store对象
        state:{
            show:false
        }
    })
    

    再然后 , 在实例化 Vue 对象时加入 store 对象 :

    new Vue({
      el: '#app',
      router,
      store,//使用store
      template: '<App/>',
      components: { App }
    })
    

    完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。

    什么情况下我应该使用 Vuex?

    Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

    如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。

    但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

    引用 Redux 的作者 Dan Abramov 的话说就是:

    Flux 架构就像眼镜:您自会知道什么时候需要它。

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录