简介
本篇文章主要是介绍在nuxt中介绍怎么使用vuex
操作
1、在项目根目录下新建store文件夹
2、在store里新建modules文件夹,在modules里面新建city.js文件 city.js代码如下
const state = () => ({
list: ["a", 'b', 'd', 'e']
});
const mutations = {
add(state, text) {
state.list.push(text)
}
}
const actions = {
add: ({ commit }, text) => {
commit('add', text)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
vuex的入口文件
1、在store目录下新建index.js文件 代码如下
import Vuex from 'vuex';
import Vue from 'vue';
import city from './modules/city';
import navbar from './modules/navbar';
Vue.use(Vuex);
const store = () => new Vuex.Store({
modules: {
city,
navbar
},
actions: {}//在这里留个悬念下片文章会介绍怎么使用这个actions
})
export default store
在项目中使用
<ul>
<li v-for="(item, index) in $store.state.navbar.city" :key="index">{{index}}--{{item}}</li>
</ul>
谢谢观看,如有不足,敬请指教