vuex helloWorld

1、使用前需要在項目中安裝一下vuex

npm install vuex --save  或  cnpm install vuex --save

2、需要了解一下vuex是什麼以及vuex提出的幾個概念

• (1)、vuex是什麼?
  Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

• (2)、核心概念

State: 單一狀態樹（靜態變量）， 輔助函數（mapState）
Getter: 計算屬性，輔助函數（mapGetters）
Mutation: 更改 Vuex 的 store 中的狀態的唯一方法，輔助函數（mapMutations）
Action: Ⅰ、Action 提交的是 mutation，而不是直接變更狀態。
        Ⅱ、 Action 可以包含任意異步操作。
        輔助函數（mapActions）

3、實戰（計數器）

目錄結構如下圖

index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 import state from './state'
 import mutations from './mutations'
 import actions from './actions'

 Vue.use(Vuex)

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

state.js

  const state = {
    	count: 0
  }

  export default state;

mutations.js

  const mutations = {  
    //        箭頭函數方式                                                                                                                   
    //	increment: state => state.count++,                                                                                                  
    //	decrement: state => state.count--       
                                                                                          
      increment(state) {                                                                                                                  
  	  state.count ++                                                                                                                  
    },                                                                                                                                  
    decrement(state) {                                                                                                                  
    	state.count --                                                                                                                  
    }                                                                                                                                   
  }                                                                                                                                       
                                                                                                                                      
  export default mutations;          

actions.js

    const actions = {
	increment({commit}) {
		commit('increment');
	},
	decrement({commit}) {
		commit('decrement');
	}
    }

    export default actions;              

main.js

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

    Vue.config.productionTip = false

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,    //  掛載store
      components: { App },
      template: '<App/>'
    })

HelloWorld.vue

      <template>
       	<div class="hello">
			<h1>{{count}}</h1>
			<button @click="increment">+</button>
			<button @click="decrement">-</button>
		</div>
    </template>

    <script>
	import { mapState, mapActions } from 'vuex'

	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		computed: mapState([
			'count'
		]),
		methods: {
			...mapActions([
				'increment',
				'decrement'
			])
		}
	}
    </script>