1. Vuex状态树
对于每个大项目来说,使用状态树(store)和管理状态(state)十分有必要。这也就是为什么Nuxt.js内核实现了Vuex。
1.1 简单用法
nuxt中的vuex在使用方法上与vue上相似
1.1.1 定义一个store
- /store/index.js
export const state = () => ({
counter: 0
})
export const mutations = {
setIniteCount(state, parmas) {
state.counter = parmas
},
increment(state) {
state.counter ++
}
}
1.1.2 在页面中使用
<h3 @click="addOne">该用户拥有的水果种类有:{
{counter}}</h3>
import {mapState} from 'vuex'
export default Vue.extend({
computed: {
...mapState(['counter'])
},
async asyncData(context) {
try {
let { data } = await myAxios.get('/fruits')
context.store.commit('setIniteCount', data.dataSource.length) // asyncData中使用context来访问store
return {
list: data.dataSource || []
}
}catch (err) {
console.log(err.message)
// alert(err.message)
}
},
methods: {
addOne() {
this.$store.commit('increment')
}
},
})
1.2 模块化
上述示例中,只创建了一个store/index.js文件,后续堆砌会变得非常的冗余,此时我们需要将功能提炼一下,将相同功能的相关状态和操作放在单独的文件中,便于维护和扩充以及定位问题。例如,我们需要创建一个todo事项的存储信息
1.2.1 定义状态及操作
- store/todo.js 定义待办项的列表信息、增加

最低0.47元/天 解锁文章
214

被折叠的 条评论
为什么被折叠?



