nuxt項目里使用vuex狀態樹

本文只記錄我做項目的實際情況，方便以后寫項目回憶，寫的並不詳細具體。詳細用法可以參考官方文檔

需要明確的是：

1. nuxt項目里使用vuex，不需要像普通vue項目那樣配置。Nuxt.js 會嘗試找到應用根目錄下的 store 目錄，如果該目錄存在，它將做以下的事情：
   • 引用 vuex 模塊
   • 將 vuex 模塊 加到 vendors 構建配置中去
   • 設置 Vue 根實例的 store 配置項
2. store 目錄下的每個 .js 文件會被轉換成為狀態樹指定命名的子模塊 （當然，index 是根模塊）。
3. state的值應該始終是function，為了避免返回引用類型，會導致多個實例相互影響。

實例

store/geo.js:

  export const state= ()=>({
    position: '',
    city: ''
  })
  export const mutations={
    setPosition(state, payload) {
      state.position = payload.position;
      state.city = payload.city;
    }
  }
  export const actions={
    setPosition({commit}, payload) {
      commit('getPosition', payload);
    }
  }

store/index.js:

const axios = require('axios');
export const actions = {
  async nuxtServerInit({ commit }, { req, app }) {
    const { status, data: { data } } = await axios.get('http://127.0.0.1:3000/geo/getPosition')
    commit('geo/setPosition', status == 200 ? data : { province: '1', city: '' })
  }
}

在pages/geo.vue 中，使用 gro 模塊中的數據：

this.$store.state.geo.city