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>