vue3中的vuex理解

vuex,概念理论什么的，我就不多说了。懂的人都懂。不懂的，请自己谷歌。本博文主要讲解它的一些常用方法和持数据的持久化（本文是以模块化来写的）。
1、安装

npm install vuex@next --save
npm i vuex-persistedstate #持久化插件

2、在根目录下新建一个store目录，再在该目录下新建一个index.ts文件（做为vuex的入口文件）

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import user from './user' //user模块
import goods from './goods' //goods模块
//.....
//你需要哪些模块就引入哪些模块（并在对应的目录建立相应的文件）

export default createStore({
    modules:{
        user,
        goods
    },
    plugins:[ //这个是插件，
        createPersistedState({
            storage: window.sessionStorage,
            key: 'vuex',
            paths:['user' , 'goods']
        })
    ]
})

2、以user.ts模块为例

export default {
    namespaced:true,
    state:{
        count:10,
        name:'xiaobing',
        users:[
            {id:1, name:'xiaobing' , sex:1},
            {id:2 , name:'bingningcao' , sex:2},
            {id:3, name:'bingning' , sex:1}
        ]
    },
    mutations:{
        setCount(state , payload){
            state.count = state.count + payload
        }
    },
    actions:{
        setActionsCount(context , params){
            context.commit('setCount' , params)
        }
    },
    getters:{
        getUserSexas1(state){
            return (sex)=>{
                return state.users.filter(item=>{
                    return item.sex == sex
                })
            }
        }
    },
}

3、在组件/页面上使用

<template>
    <div class="container">
        {{ getUserSexas1(2) }}
        <div>{{ store.state.user.count }}</div>

        <div><button @click="setCount(100)">btn</button></div>
    </div>    
</template>

<script lang="ts" setup>
    import { computed } from 'vue';
    import { useStore , mapState } from 'vuex'; 
    let store = useStore();

    // const getUserSexas1 = computed(()=>(sex)=>{
    //     return store.getters['user/getUserSexas1'](sex)
    // })
    
    const getUserSexas1 = computed(()=>{
        return (sex)=>{
            return store.getters['user/getUserSexas1'](sex)
        }
    })


    function setCount(val){
        store.commit('user/setCount' , val); //只是做为提交（**Mutation**）
        let r = store.state.user.count
        console.log(r)
    }
	//实际中，我们是不应该直接提交（**Mutation**）里面的，只是通过（**Action**）去分发。
	//分发，对应user.js 中 action 里的  **setActionsCount**
	
	function setActionsCount(params){
		//对应user.js 中 action 里的
        store.dispatch('user/setActionsCount' , params) 
    }
</script>