vuex

App.vue部分

<template>
  <div id="app">
    <input type="button"  value="增長" @click='increment' />
    <input type="button"  value="減小" @click='decrement' />
    <input type="button"  value="偶數才能增長" @click='clickOdd' />
    <input type="button"  value="異步請求" @click='clickAsync' />
    <div>
          如今的數字爲：{{count}},他如今是{{getOdd}}
      </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
export default {
  name: 'app',
  computed:mapGetters([
      'count',
      'getOdd'
  ]),
  methods:mapActions([
      'increment',
      'decrement',
      'clickOdd',
      'clickAsync'
  ])
}
</script>

main.js部分

import Vue from 'vue'
import App from './App.vue'

import store from './store.js'


new Vue({
    store,
  el: '#app',
  render: h => h(App)
})

建一個store.js文件

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

Vue.use(Vuex);

var state = {
    count:10
}

const mutations = {// 處理狀態（數據）的變化
    increment(state){
        state.count++;
    },
    decrement(state){
        state.count--;
    }
}

const actions = {
    increment: ({// 處理你要幹什麼，異步請求，判斷，流程控制
        commit
    }) => {
        console.log(commit);
        commit('increment')
    },
    decrement:({commit})=>{
        commit('decrement')
    },
    clickOdd:({commit,state})=>{
        if(state.count%2==0){
            commit('increment')
        }
    },
    clickAsync:({commit})=>{
        new Promise((resolve) => {
            setTimeout(function(){
                commit('increment');
                resolve();
            },1000);
        })
    }
}

const getters={
    count(state){
        return state.count;
    },
    getOdd(state){
        return state.count%2==0?'偶數':'奇數';
    }
}

//導出store對象
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

下面是官方推薦的目錄存放

 

 思路圖

 而後下面是按官方建的各個文件的內容

首先是App.vue

<template>
  <div id="app">
    <input type="button"  value="增長" @click='increment' />
    <input type="button"  value="減小" @click='decrement' />
    <input type="button"  value="偶數才能增長" @click='clickOdd' />
    <input type="button"  value="異步請求" @click='clickAsync' />
    <div>
          如今的數字爲：{{count}},他如今是{{getOdd}}
      </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
export default {
  name: 'app',
  computed:mapGetters([
      'count',
      'getOdd'
  ]),
  methods:mapActions([
      'increment',
      'decrement',
      'clickOdd',
      'clickAsync'
  ])
}
</script>

 

 main.js

import Vue from 'vue'
import App from './App.vue'

import store from './store/'


new Vue({
    store,
  el: '#app',
  render: h => h(App)
})

index.js

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

Vue.use(Vuex);

import mutations from './mutations'
import actions from './actions'

//導出
export default new Vuex.Store({
    modules:{
        mutations
    },
    actions
})

actions.js

import * as types from './types'

export default {
    increment:({commit}) => {
        commit(types.INCREMENT)
    },
    decrement:({commit}) => {
        commit(types.DECREMENT)
    },
    clickOdd:({commit,state}) => {
        if(state.mutations.count%2==0){
            commit(types.INCREMENT)
        }
    },
    clickAsync:({commit}) => {
        new Promise((resoLve)=>{
            setTimeout(function(){
                commit(types.INCREMENT)
            },1000)
        })
    }
}

mutations.js

import {INCREMENT,DECREMENT} from './types'

import getters from './getters'
const state = {
    count:20
}

//接收
const mutations = {
    [INCREMENT](state){
        state.count++;
    },
    [DECREMENT](state){
        state.count--;
    }
}

//導出數據
export default{
    state,
    mutations,
    getters
}

getters.js

export default{
    count:(state)=>{
        return state.count
    },
    getOdd:(state)=>{
        return state.count%2==0?'偶數':'奇數'
    }
}

types.js

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';