安装

npm install vuex

使用

为了在 Vue 组件中访问 this.$store property，需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({

    state: {

      count: 0

    },

    mutations: {

      increment (state) {

        state.count++

      }

    }

  })
export default store  //导出

main.js导入

State

应用方式一

{{this.$store.state.count}}

应用方式二 computed

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

应用方式三 mapState辅助函数

computed:{
    //1、箭头函数
    count: state => state.count
    // 2、传字符串参数 'count' == state => state.count
     countAlias: 'count',
    //3、使用this获取局部状态，必须使用常规函数
    countState(state){
      return state.count + this.localCount
    }

    // count(){
    //   return this.$store.state.count
    // }
  }

最简便的方式

  computed: mapState([
    'count'
    ]),