vuex

npm install vuex --save

//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

//index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
        count:1
    },
    getters:{
        getStateCount:function(state){
            return state.count+1
        }
    },
    mutations:{
        add(state){
            state.count = state.count+1
        },
        reduction(state,n){
            state.count = state.count-n
        }
    },
    actions:{//注册actions，类似mothods
        addFun(context){//接受一个与store实例具有相同方法的context对象
            context.commit("add")
        },
        reductionFun(context,n){
            context.commit("reduction",n)
        }
    }
})
export default store

//demo.vue
<template>
    <div>
        <h2>{{count1}}</h2>
        <h3>{{this.$store.state.count}}</h3>
        <h3>{{this.$store.getters.getStateCount}}</h3>
        <button @click="addFun">+</button>
        <button @click="reductionFun">-</button>
    </div>
</template>
<script>
import {mapState,mapActions,mapGetters} from 'vuex'
export default {
    data(){
        return {
            aaa:''
        }
    },
    computed:{
        ...mapState({
            count1:state=>state.count
        })
    },
    created (){
        console.log(this.$store.state.count)
    },
    methods:{
        addFun(){
            // this.$store.commit("add")
            this.$store.dispatch("addFun")
        },
        reductionFun(){
            // this.$store.commit("reduction")
            var n = 10;
            this.$store.dispatch("reductionFun",n)
        }
    }
}
</script>
<style  scoped>

</style>

从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态，用计算属性监听数据变化

computed: {
    count () {
      return this.$store.state.count
    }
  }

```bash
这里可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    a: state => state.a,
    b: state => state.b,
    c: state => state.c,

    // 传字符串参数 'b'
    // 等同于 `state => state.b`
    bAlias: 'b',

    // 为了能够使用 `this` 获取局部状态
    // 必须使用常规函数
    cInfo (state) {
      return state.c + this.info
    }
  })
}

computed: mapState([
  // 映射 this.a 为 store.state.a
  'a',
  'b',
  'c'
])

computed: {
  localComputed () { 
    ...
  },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
取个别名
mapGetters({
  doneCount: 'doneTodosCount'
})

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      // 将 `this.increment()` 映射为 
      // `this.$store.commit('increment')`
      'increment', 
      // `mapMutations` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store.commit('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapMutations({
      // 将 `this.add()` 映射为 
      // `this.$store.commit('increment')`
      add: 'increment' 
    })
  }
}

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      // 将 `this.increment()` 映射为 
      // `this.$store. dispatch('increment')`
      'increment', 
      // `mapActions` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store. dispatch('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapActions({
      // 将 `this.add()` 映射为 
      // `this.$store. dispatch('increment')`
      add: 'increment' 
    })
  }
}