vuex是vue的状态管理工具,为了更方便实现多个组件共享状态

// src/store/index.js

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

Vue.use(Vuex)

// Vuex是一个对象，里面有一个大写的Store和install方法
export default new Vuex.Store({
  state: {
    count: 1
  },
  getters: {
    getCount(state) {
      return state.count + 1
    }
  },
  mutations: {
    changeCount(state, payload) {
      state.count += payload 
    }
  },
  actions: {
    changeCount({ commit }, payload) {
      setTimeout(() => {
        commit('changeCount', payload)
      }, 1000)
    }
  },
  modules: {
  }
})

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

// 注入vue-router后所有组件都可以获取到_router属性，可以通过$router使用
// 注入的是vuex中的store，所有组件都可以同$store拿到这个变量
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

// src/App.vue

<template>
  <div id="app">
    <div>
      count:{{$store.state.count}}
    </div>

    <div>
      gettter:{{$store.getters.getCount}}
    </div>

    <!-- 不要直接修改state的值，因为一个state的值可能被多个组件使用，如果在某个组件里直接修改这个state的值，会影响到其他组件，不利于查找数据的改变来源。 -->
    <button @click="$store.state.count = 10">不合规改变state</button>

    <button @click="$store.commit('changeCount', 10)">同步加{{$store.state.count}}</button>

    <button @click="$store.dispatch('changeCount', 100)">异步加{{$store.state.count}}</button>
  </div>
</template>

这里我们可以进行类比： state 类比为组件的状态 ，getters类比为组件的计算属性 ， mutations类比为组件中的方法（可以更改组件的状态），actions用于进行异步操作将结果提交给mutation

<template>
  <div id="app">
    <div>
      count:{{$store.state.count}}
    </div>

    <div>
      gettter:{{$store.getters.getCount}}
    </div>

    <!-- 不要直接修改state的值，因为一个state的值可能被多个组件使用，如果在某个组件里直接修改这个state的值，会影响到其他组件，不利于查找数据的改变来源。 -->
    <button @click="$store.state.count = 10">不合规改变state</button>

    <button @click="$store.commit('changeCount', 10)">同步加{{$store.state.count}}</button>

    <button @click="$store.dispatch('changeCount', 100)">异步加{{$store.state.count}}</button>
  </div>
</template>

不允许直接修改state的值，因为一个state的值可能被多个组件使用，如果在某个组件里直接修改这个state的值，会影响到其他组件，不利于查找数据的改变来源。

这个$store属性是通过根实例传入的

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

内部会将store属性挂载在每个实例上命名为$store,这样所有组件都可以操作同一个store属性