阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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的教程都有!

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

      目录
      目录