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

nuxt项目里使用vuex状态树

原文：https://www.cnblogs.com/superlizhao/p/12145526.html