nuxt.js使用vuex

使用状态树

Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情：

1. 引用 vuex 模块

2. 将 vuex 模块 加到 vendors 构建配置中去

3. 设置 Vue 根实例的 store 配置项

Nuxt.js 支持两种使用 store 的方式，你可以择一使用：

• 模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块）

• Classic(不建议使用)： store/index.js返回创建Vuex.Store实例的方法。

无论使用那种模式，您的state的值应该始终是function，为了避免返回引用类型，会导致多个实例相互影响。

创建vuex

在store的文件夹下，创建index.js和modules文件，modules文件用来存放每个state，例如modules创建user.js

const state=()=>({

    list:['a']

})

const mutations={
    add(state,text){
        state.list.push(text)
    }
}
const actions={
    add:({commit},text)=>{
        commit('add',text)
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

index.js代码如下：

import Vue from 'vue';
import Vuex from 'vuex';
import city from './modules/city'
import navbar from './modules/city'
Vue.use(Vuex);
const store=()=>new Vuex.Store({
    modules: {
        city,
        navbar
    },
    actions:{

    }
})

export default store;

nuxt使用vuex

<ul>
    <li v-for='(item,index) in  $store.state.city.list ' :key="index">{{item}}</li>
</ul>