简单理解就是 vueX管理着一个web应用的全局变量

用法

1.可以在src目录下创建一个文件夹并命名为store
在store文件夹下创建 store.js文件

2.在main.js配置如下
主要新增了两条：
1)import store from ‘@/store/store.js’
2)注释//使用store那句

import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store/store.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, //使用store
  components: { App },
  template: '<App/>'
})
.在需要使用的vue组件中。当然也可以全局引入。

import store from '@/store/store.js'
以下是demo源码，仅供参考

store.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let getters = {
    countPlusTen(state,getters,rootState){
        return state.count+10;
    }
}

let  mutations = {
    increment: state => state.count++,
    decrement(state){
    return state.count=state.count-1;
  },
  //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
  //上面是 => 和 对等的普通写法
}

let actions = {
  increment (state) {
    state.commit('increment');
  },
  decrement (state) {
    state.commit('decrement');
  },
  //主要是操作mutations
}

export default new Vuex.Store({
  state: {
    count:1,
  },
  getters,
  mutations,//操作方法
  actions,//一般把参数传递给mutations操作
})

2.main.js （上面有，就不再贴了）

3.vue组件

<template>
  <div class="container">
    <h1 style="color:#000;font-size:3rem;" >
      {{$store.state.count}}
    </h1>
    <h1 style="color:#000;font-size:3rem;" >
      {{this.countPlusTen()}}
    </h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import store from '@/store/store.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      count: 0,
    }
  },
  computed:{
    count(){
      return store.state.count;
    }
  },
  methods: {
    increment () {
      store.dispatch('increment');//dispatch调用actions
      //actions 用conmmit 调用mutations
    },
    decrement () {
      store.dispatch('decrement');
    },
    countPlusTen(){
      return store.getters.countPlusTen;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

奈斯

优秀，奈斯