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
}
},