vue3学习(五.1)vuex 的基础使用+模块化【在vue3中使用】

一 最简单的使用。

1.1 定义store

//  src/store/store.ts  定义store
import { createStore } from "vuex";

interface State {
    count:number;
}


export const store = createStore<State>({
    state() {
        return {
            count:0
        }
    },
    mutations:{
        incr(state:State):void {
            state.count ++
        }
    },
})

1.2 定义main.ts use 插件

// main.ts  使用插件。

import {store} from '@/store/store';
createApp(App).use(store).mount('#app')

1.3 组件中，使用store

//组件中使用  xxx.vue
<script setup lang="ts">

    import { computed } from '@vue/reactivity';
    import { useStore } from 'vuex';

    const store = useStore();

    const count = computed(()=>{
      return store.state.demo.count
    })

    const countDouble = computed(()=>{
      return store.getters['demo/countDouble'];
    })


    const incr = ()=>{
      store.commit('demo/incr', 1);
    }

...

二 模块化使用。

2.1 定义一个模块

//    src/store/modules/demo.ts
    
interface iDemo {
    count:number,
    name:string,
}

export default{
    namespaced: true,

    state:{
        count:0,
        name:'hello demo'
    },
    mutations:{
        incr(state:iDemo) {
            state.count ++;
        }
    }
}

2.2 在vuex的入口js 中引入 module

import { createStore } from "vuex";

import demo from '@/store/modules/demo'

export const store = createStore({
    state() {   },
    getters:{   },
    mutations:{ },
    modules:{
        demo
    }
})

2.3 在组件中使用.

import { computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();

const count = computed(()=>{
  //读取
  return store.state.demo.count
})

const incr = ()=>{
  //提交
  store.commit('demo/incr', 1);
}

2.4 getter 的使用

   //1 在demo.ts 中
   export default {
   ...
    getters:{
        countDouble: (state:iDemo) => {
            return state.count * 2;
        },
    },
    ...
    }
    
    //2 组件中
    const countDouble = computed(()=>{
              return store.getters['demo/countDouble']
    })

效果如图