初识vuex

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、实战（计数器）

目录结构如下图

image.png

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>