vuex

一.什么是vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools扩展，提供了诸如零配置的time-travel调试，状态快照，导入等高级调试功能。

 二.做了一个官方点击加次数的经典案例 

 

index.js和count.vue代码如下

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  // 数据都放在state里面
  state: {
       count:0 //初始化数据
  },
  // 同步的一些操作在这里面
  mutations: {
      ADD(state){
          state.count++
      },
      JIAN(state){
          state.count--
      }
  },
  actions: {
      actionAdd({commit}){
          commit('ADD')
      },
      act({commit}){
          commit('JIAN')
      }
  },
  getters:{
      isodd(state){
          return state.count % 2===0?'偶数':'奇数'
      }
  }
})

 

 count.vue

注释的代码是另外两种方法获取mutations里面方法的方法

<template>
    <div>
        <p>总共点击了{{count}}次 count是{{isodd2}}</p>
        <button @click="add">增加</button>
        <button  @click="jian">减少</button>
    </div>
    
</template>
<script>
    // 1.获取mutations
    // import {mapMutations} from 'vuex'
    export default{
        computed:{
            count(){
                // 得到vurx里面的count值
                return this.$store.state.count    
            },
            isodd2(){
                return this.$store.getters.isodd
            }
        },
        methods:{
            // 2.得到里面的方法
            // ...mapMutations(['ADD','JIAN']),
            add(){
                // 3.调用里面的方法
                // this.$store.commit('ADD')
                // this.ADD()
                this.$store.dispatch('actionAdd')
            },
            jian(){
                // this.$store.commit('JIAN')
                // this.JIAN()
                this.$store.dispatch('act')
            }
        }
    }
</script>

<style>
</style>