首页 > 代码库 > VueX(0)

VueX(0)

实习公司需要VueX的应用,这里是关于VueX的一些总结:

一:我们为什么要使用Vuex?

一个简单的vue代码如下:

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

  如上:

一个vue过程包含三个模块:

1,state:vue状态管理,这里面是用于管理Vue的状态,或者是vue的数据源,这是我们用于为vue提供数据的地方;

2,view:vue渲染视图,以声明的方式将state渲染到视图,这里是state用来作用的html DOM部分;

3,actions:可以认为是计算函数,这儿我们可以改变vue的状态;

下图是一个单向数据流理念的示意图:

技术分享

我们可以看到,上面三种状态互相依赖作用:

单向数据流应用于单一组件,但是当我们使用的组件过多的时候,我们需要各个组件之间共享的状态,为了解决这个问题,我们使用VueX来解决这个问题:

放一张VueX来解决问题:

技术分享

 

VueX(0)