Vuex4.0版本初学笔记（基于Vue3.0）

Vuex4.0版本初学笔记（基于Vue3.0）

• devtools 离线编译安装

1、源码下载地址
2、yarn install安装依赖yarn run build编译
3、在chrom中打开开发者模式，点击“加载已解压的扩展程序”，选择源码目录packages/shell-chrome/

• Vuex的基础使用

1、创建store

import { createStore } from 'vuex'

const store = createStore({
    state() {
        return {
            counter: 10
        }
    },
    mutations: {
        increment (state) {
            console.log(state);
            state.counter++
        }
    },
    getters: {

    },
    actions: {

    },
    modules: {
        
    }
});

2、挂载使用store

import store from './store'
createApp(App).use(store).mount('#app')

3、组件中使用store中的数据

import { mapState, useStore } from "vuex";
import { computed } from "vue";

export default {
    setup() {
        const store = useStore();
        console.log('setup - ', store.state.counter);
        const add = () => {
            store.commit('increment')
        }
        // setup - computed
        const setupCounter = computed(() => store.state.counter)
        return {
            add,
            setupCounter
        }
    },
    methods: {
        addMethod() {
            this.$store.commit('increment');
        }
    },
    // computed中使用store中的数据 第一种方法
    // computed: {
        // computedCounter() {
        //     return this.$store.state.counter;
        // }
    // }
    // 第二种方法
    // computed: mapState({
    //     computedCounter: state => state.counter,
    // })
    // 第三种方法
    // computed: mapState(['counter'])
    computed: {
        computedCounter() {
            return this.$store.state.counter;
        },
        ...mapState(['counter'])
    }
}

• gatters的创建以及使用

// 定义的gatter函数
getters: {
    getterDemo(state) {
        console.log('gettter', state.counter);

        return state.counter * 2;
    },
    // getter调用其他getter方法
    getterDemo1(state, getters) {
        return `getterDemo1 - ` + getters.getterDemo;
    },
    // 返回函数
    getterDemofun(state) {
        return (number) => {
            return number * state.counter;
        };
    }
}

// 模板中使用getter方法
<div>getterDemo - {{$store.getters.getterDemo}}</div>
<div>getterDemo1 - {{$store.getters.getterDemo1}}</div>
<div>getterDemofun - {{$store.getters.getterDemofun(3)}}</div>

// computed中使用
<div>getterDemo - {{getterDemo}}</div>
<div>getterDemo1 - {{getterDemo1}}</div>
<div>getterDemofun - {{getterDemofun(3)}}</div>

<div>getterDemoAlias - {{getterDemoAlias}}</div>
<div>getterDemoAlias1 - {{getterDemo1Alias}}</div>
<div>getterDemofunAlias - {{getterDemofunAlias(3)}}</div>
        
computed: {
    ...mapGetters(['getterDemo', 'getterDemo1', 'getterDemofun']),
    ...mapGetters({
        getterDemoAlias: 'getterDemo',
        getterDemo1Alias: 'getterDemo1',
        getterDemofunAlias: 'getterDemofun',
    })
}

• mutations的创建以及使用

mutations必须是同步函数，devtool会记录mutation的状态。

// mutation-types.js 定义常量
export const SOME_MUTATION = 'SOME_MUTATION';

// 定义mutations函数
import { SOME_MUTATION } from './mutation-types'
mutations: {
    increment(state) {
        console.log(state);
    },
    // param参数，可以是对象
    add(state, param) {
        console.log('add - ', param);
    },
    [SOME_MUTATION](state, param) {
        console.log('SOME_MUTATION', param);
    }
},

// 基础使用
import { SOME_MUTATION } from '../../store/mutation-types'
methods: {
    addMethod() {
        // 基础使用传递参数
        this.$store.commit('add', 8);
        this.$store.commit(SOME_MUTATION);
        // 传递对象参数
        this.$store.commit('add', {
           name: 'zandan'
        });
    },
}

// 模板中直接提交commit
<button @click="$store.commit('increment')">直接提条</button>

// method中使用mapMutations映射
methods: {
    ...mapMutations(['increment', SOME_MUTATION]),
    ...mapMutations({
        addAlias: 'add'
    })
},

// setup中映射
setup() {
    return {
        ...mapMutations(['increment', SOME_MUTATION]),
        ...mapMutations({
            addAlias: 'add'
        })
    }
},

<button @click="increment">increment</button>
<button @click="addAlias({name: 'sss'})">addAlias</button>
<button @click="SOME_MUTATION(4)">SOME_MUTATION</button>

• actions的使用

Action提交的是mutation,而不是直接修改状态，Action可以包含任意异步操作。

Action还有一个context参数。context是一个和store实例均有相同方法和属性的context对象;
所以可以从其中获取到commit方法来提交一个mutation，或者通过context.state和context.getters来获取state和getters;

// 基本使用
actions: {
    actionDemo(context) {
        // context = commit/dispatch/getters/rootGetters/rootState/state
        console.log('actionDemo', context);
        context.commit("increment");
    }
},

<div>模板中获取值：{{$store.state.counter}}</div>
<button @click="addMethod">action提交</button>
<button @click="actionDemo">actionDemo</button>
<button @click="addAction">addAction</button>
<button @click="setupAction">setupAction</button>

import { mapActions } from "vuex"
export default {
    setup() {
        return {
           ...mapActions({
                setupAction: 'actionDemo'
            })
        }
    },
    methods: {
        addMethod() {
            this.$store.dispatch('actionDemo')
        },
        ...mapActions(['actionDemo']),
        ...mapActions({
            addAction: 'actionDemo'
        }),
    }
}

• module的使用

基本使用

// homeModule.js
export default {
    namespaced: true,
    state() {
        return {
            title: "home"
        }
    },
    mutations: {

    },
    getters: {

    },
    actions: {

    }
}

// mineModuele.js
export default {
    namespaced: true,
    state() {
        return {
            title: "mine"
        }
    },
    mutations: {

    },
    getters: {

    },
    actions: {

    }
}

// rootModule.js
import { createStore } from 'vuex'
import home from './homeModule'
import mine  from './mineModule'

const store = createStore({
    state() {
        return {
            counter: 10,
            title: 'root'
        }
    },
    mutations: {
    },
    getters: {
    },
    actions: {
    },
    modules: {
        home,
        mine
    }
});

export default store;

// state数据的获取
<div>模板中获取值：{{$store.state.title}}</div>
<div>模板中获取值：{{$store.state.home.title}}</div>
<div>模板中获取值：{{$store.state.mine.title}}</div>
<div>模板中获取值：{{homeTitle}}</div>

computed: {
    homeTitle() {
        return this.$store.state.mine.title;
    }
}
        

多个module中使用getter和actions

export default {
    namespaced: true,
    state() {
        return {
            title: "home"
        }
    },
    mutations: {
        changeTitle(state) {
            console.log(state);
        }
    },
    getters: {
        // getterTitle(state, getters, rootState, rootGetters)
        getterTitle(state) {
            return state.title + " getter"
        },
    },
    actions: {
        // context = {commit, dispatch, state, rootState, getters, rootGetters}
        changeTitleAction(context) {
            context.commit('changeTitle');
            // 派发root module中的mutations
            context.commit('changeTitle', null, {root: true});
        }
    }
}

// 模板
<button @click="changeTitle">changeTitle</button>
<div>{{$store.getters["home/getterTitle"]}}</div>

methods: {
    changeTitle() {
        this.$store.dispatch('home/changeTitleAction');
    }
}

// 在助手函数中的使用
<div>模板中获取值 - mapTitle：{{mapTitle}}</div>
<div>模板中获取值 - mapTitleHome: {{mapTitleHome}}</div>
<button @click="changeTitleAction">map changeTitle</button>
<button @click="homeObject">map homeObject</button>

import { mapState, mapActions  } from "vuex";
export default {
    setup() {
        return {
        }
    },
    methods: {
        ...mapActions('home', ['changeTitleAction']),
        ...mapActions('home', {
            homeObject: 'changeTitleAction'
        })
    },
    computed: {
        homeTitle() {
            return this.$store.state.mine.title;
        },
        ...mapState({
            mapTitle: state => state.home.title
        }),
        ...mapState("home", {
            mapTitleHome: state => state.title
        })
    }
}
    
// 利用createNamespacedHelpers导出使用
import { createNamespacedHelpers  } from "vuex";
const {mapActions, mapState} = createNamespacedHelpers("home");
export default {
    setup() {
        return {
        }
    },
    methods: {
        ...mapActions(['changeTitleAction']),
        ...mapActions({
            homeObject: 'changeTitleAction'
        })
    },
    computed: {
        ...mapState({
            mapTitle: state => state.title
        }),
        ...mapState( {
            mapTitleHome: state => state.title
        })
    }
}