Nuxt.js 内置引用了 vuex 模块，所以不需要额外安装。
Nuxt.js 会找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情：
- 引用
vuex模块 - 将
vuex模块 加到 vendors 构建配置中去 - 设置
Vue根实例的store配置项
Nuxt.js 支持两种使用 store 的方式，你可以择一使用：
- 模块方式：
store目录下的每个.js文件会被转换成为状态树指定命名的子模块 （当然，index是根模块） - 普通方式：
store/index.js返回一个 Vuex.Store 实例（官方不推荐）
模块方式
状态树还可以拆分成为模块，store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块
使用状态树模块化的方式，store/index.js 不需要返回 Vuex.Store 实例，而应该直接将 state、mutations 和 actions 暴露出来：
index.js
export const state = () => ({
articleTitle: [],
labelList: []
})
export const mutations = {
// 设置热门文章标题
updateArticleTitle(state, action) {
state.articleTitle = action
},
// 设置标签列表数据
updateLabel(state, action){
state.labelList = action
}
}
export const actions = {
// 获取热门文章标题
fetchArticleTitle({ commit }) {
return this.$axios
.$get('http://localhost:3000/article/title')
.then(response => {
commit('updateArticleTitle', response.data)
})
},
// 获取标签
fetchLabel({ commit }) {
return this.$axios
.$get('http://localhost:3000/label/list')
.then(response => {
commit('updateLabel', response.data)
})
},
}
index.vue
fetch方法中触发异步提交状态事件
<script>
import ArticleList from '~/components/archive/list'
import Banner from '~/components/archive/banner'
export default {
components: {
ArticleList,
Banner,
},
async asyncData({ app }){
//获取文章列表数据
let article = await app.$axios.get(`http://localhost:3000/article/list?pageNum=1&pageSize=5`)
return {articleList: article.data.data}
},
async fetch({ store }) {
return Promise.all([
store.dispatch('common/fetchArticleTitle'),
store.dispatch('common/fetchLabel')
])
},
computed: {
},
methods: {
}
}
</script>
对应组件中通过computed 方法获取状态数据
computed: {
labelList(){
return this.$store.state.common.labelList
}
},
