nuxt项目里使用vuex状态树
本文只记录我做项目的实际情况,方便以后写项目回忆,写的并不详细具体。详细用法可以参考官方文档
需要明确的是:
- nuxt项目里使用vuex,不需要像普通vue项目那样配置。Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:
- 引用 vuex 模块
- 将 vuex 模块 加到 vendors 构建配置中去
- 设置 Vue 根实例的 store 配置项
- store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 (当然,index 是根模块)。
- 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