Nuxt-Vuex篇

简介

本篇文章主要是介绍在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>

谢谢观看，如有不足，敬请指教