安装依赖

npm install vuex --save
npm install axios --save

Vuex Store

新建 store 文件夹，下面新建 index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
    modules: {
        Product,
        Cart
    }
});

然后在 main.js 中添加 store

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

应用状态管理

Vuex 可以用来管理应用的数据状态，一共有四种状态

1. state
2. mutations
3. actions
4. getters

首先 state 用来定义数据，比如说商品数据

const state  = {
    productList : []
}

然后定义更新商品数据的方法

const mutations = {
    UPDATE_PRODUCT(state, data) {
      state.producList = data;
  }
}

接着定义动作, 跟服务器进行交互

const actions = {
    getProducts({ commit }) {
      axios.get("/api/getProducts").then( res => {
        commit("UPDATE_PRODUCT", res.data)
    })
  }
}