nuxt的store使用方法

目录结构

1.store下新建index.js，是nuxt状态树的入口文件

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = () => new Vuex.Store({
    getters: {},
    state: {
        num: 0,
    },
    mutations: {
        addIncrement(state,payload){
            console.log(payload)
            state.num = payload;
        }
    },
    actions: {
        SET_ADD_ACTION(context,payload){
            setTimeout(() => {
                context.commit('addIncrement',payload.num);
            }, 1000);
        }
    }
})
export default store;

该文件导出一个Vuex实例

2.状态树的模块管理在store目录下新建其他JS文件或者是新建文件夹，区别是在引用的时候多一层目录结构，其他的没有区别例如，新建company.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
export const getters = {

}
export const state = ( {
    a: 333
});
export const mutations = {
    reduceNum(state,payload){
        state.a = payload;
    }
}
export const actions = {
    SET_REDUCE_ACTION({commit},payload){
        console.log(payload)
        setTimeout(() => {
            commit('reduceNum',payload.abc)
        }, 1000);
    }
}
export default {
    getters,
    state,
    mutations,
    actions,
    namespaced: true
}

mutations可以对所有的状态进行操作
所有的异步操作都应该在actions中完成，actions可以提交mutations的操作
如果需要局部状态注册，则在导出时需要namespaced: true一下这时，index.js的变化有

import Vue from 'vue';
import Vuex from 'vuex';
import company from './company.js';

Vue.use(Vuex);

const store = () => new Vuex.Store({
    getters: {},
    state: {
        ...
    },
    mutations: {
       ...
    },
    actions: {
        ...
    },
    modules:{
        company
    },
})
export default store;

状态调用

3.状态的使用

使用index.js里的状态

<template>
    <div>
        <p>{{num}}</p>
        <div><button @click="add()">ADD</button></div> 
    </div>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
export default {
    ...
    computed: {
        //这里先获取num的状态
        ...mapState({num: state => state.num})
    },
    methods: {
        add(){
            //派发事件SET_ADD_ACTION并处理
            this.$store.dispatch('SET_ADD_ACTION',{num: 999})
        }
    },
}
</script>

使用company.js里的状态

<template>
    <div>
        <div>{{num}}</div>
        <div><button @click="add">ADD</button></div>
    </div>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
export default {
    ...
    computed: {
        //使用局部状态时需要添加模块的名字
        ...mapState('company',{
            num: (state) => state.a
        })
    },
    methods: {
        //同理，使用actions的局部状态也要添加模块名字
        ...mapActions('company',['SET_REDUCE_ACTION']),
        add(){
            this.$store.dispatch('company/SET_REDUCE_ACTION',{abc: 888})
        }
    },
}
</script>

如有错误，欢迎轻喷哈~

nuxt笔记

nuxt的store使用方法

目录结构

状态调用