Vue--- VueX基础 （Vuex结构图数据流向）1.1

Vuex基础 

https://vuex.vuejs.org/zh-cn

state --> view --> action -> state

多组件共享状态， 之前操作方式，由父组件传递到各个子组件。 当路由等加入后，会变得复杂。 引入viewx 解决共享问题。

 

原vue结构图

 

 

vuex结构图

Vuex对象结构 （state，mutations，getters，actions） 

state 对象数据

mutations 操作变更state数据

getters 计算state

actions  触发mutations

★学习之后分析数据流向图★

 

安装

npm install --save vuex

 

调试

 

 

 目标

 

 

代码1  ：原vue实现计数器

 app.uve

<template>
<div>
  <p>点击次数{{count}}， 奇偶数:{{eventOrOdd}}</p>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
  <button @click="incrementIfOdd">奇数加</button>
  <button @click="incrementAsync">异步加</button>
</div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  computed: {
    eventOrOdd () {
      return this.count % 2 === 0 ? '偶数' : '奇数'
    }
  },
  methods: {
    increment () {
      const count = this.count
      this.count = count + 1
    },
    decrement () {
      const count = this.count
      this.count = count - 1
    },
    incrementIfOdd () {
      const count = this.count
      if (count % 2 === 1) {
        this.count = count + 1
      }
    },
    incrementAsync () {
      setTimeout(() => {
        const count = this.count
        this.count = count + 1
      }, 1000)
    }
  }
}
</script>

<style>

</style>

View Code