Start Vuex

what is vuex?

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation

a basic vuex structure

store.js 是vuex的核心文件，所以首先要创建该文件

//store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state={

}
const getters={

}
const mutations={

}
const actions={

}

export default new Vuex.Store({
	state,   
	getters
	mutations,
	actions
})

其次要在入口文件中引入 store.js，引入该文件后，所有组件对象中多了个$store属性，通过使用该属性来获取store.js中的状态

//main.js

new Vue({
  el:'#app',
  store:store
})

write a count instance

the count instance , the native version

//identify_number_native.vue

<template>
  <div id='sample'>
    <h3>计数器实例，数字奇偶的辨认</h3>
    <p>原生模式下的计数器实例</p>
    <div>{{num}} cycles , currently the number is {{numType}} </div>
    <div class='btns'>
      <button @click='add'>Add</button>
      <button @click='reduce'>Reduce</button>
      <button @click='oddAdd'>OddAdd</button>
      <button @click='oddAsync'>OddAsync</button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      num:0
    }
  },
  computed:{
    numType(){
      return (this.num) % 2 === 0 ? 'even' : 'odd'
    }
  },
  methods:{
    add(){
      this.num++
    },
    reduce(){
      this.num--
    },
    oddAdd(){
      if (this.num % 2 === 1) {
        this.num++
    }
    },
    oddAsync(){
      setTimeout(()=>{
        this.num++
      },1000)
    }
  }
}
</script>

<style scoped>
  button {
    width:100px;
    height:30px;
    margin:5px;
  }
  .btns {
    margin:15px;
  }
</style>

make the count instance become vuex

start vuex , change the identify_number_native.vue , create store.js and mange state,

change native component

//identify_number_native_toVuex.vue

<template>
  <div id='sample'>
    <h3>计数器实例，数字奇偶的辨认</h3>
    <div>{{$store.state.num}} cycles , currently the number is {{numType}} </div>
    <div class='btns'>
      <button @click='add'>Add</button>
      <button @click='reduce'>Reduce</button>
      <button @click='oddAdd'>OddAdd</button>
      <button @click='oddAsync'>OddAsync</button>
    </div>
  </div>
</template>

<script>
export default {
  computed:{
    numType(){
      return this.$store.getters.numType
    }
  },
  methods:{
    add(){
      this.$store.dispatch('add')
    },
    reduce(){
      this.$store.dispatch('reduce')
    },
    oddAdd(){
      this.$store.dispatch('oddAdd')
    },
    oddAsync(){
      this.$store.dispatch('oddAsync')
    }
  }
}
</script>

<style scoped>
  button {
    width:100px;
    height:30px;
    margin:5px;
  }
  .btns {
    margin:15px;
  }
</style>

create store.js , save status

//store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state={
  num: 0
}

const getters={
  numType(state) {
    return (state.num) % 2 === 0 ? 'even' : 'odd'
  }
}

const mutations={
  addCount(state){
    state.num++
  },
  reduceCount(state){
    state.num--
  }
}

const actions={
  add({commit}){
    commit('addCount')
  },
  reduce({commit}){
    commit('reduceCount')
  },
  oddAdd({commit,state}){
    if (state.num % 2 === 1) {
      commit('addCount')
    }
  },
  oddAsync({commit}){
    setTimeout(() => {
     commit('addCount')
    }, 1000)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

go on change the component , make it simple

//identify_number.vue

<template>
  <div id='sample'>
    <h3>计数器实例，数字奇偶的辨认</h3>
    <div>在组件中使用简洁的写法去对应store.js,在组件中调用，去store.js中寻找状态，完成操作</div><br/>
    <div>{{$store.state.num}} cycles , currently the number is {{numType}} </div>
    <div class='btns'>
      <button @click='add'>Add</button>
      <button @click='reduce'>Reduce</button>
      <button @click='oddAdd'>OddAdd</button>
      <button @click='oddAsync'>OddAsync</button>
    </div>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions} from 'vuex'
export default {
  computed:{
    ...mapState(['num']),       //{return this.$store.state['num']}
    ...mapGetters(['numType']), //{return this.$store.getters['numType']}
  },
  methods:{
    ...mapActions(['add','reduce','oddAdd','oddAsync']),
  }
}
</script>

<style scoped>
  button {
    width:100px;
    height:30px;
    margin:5px;
  }
  .btns {
    margin:15px;
  }
</style>