Vue3中vuex的使用方法

目录

目录​​​​​​​

安装

main.js:

一：无模块化

store/index.js:

使用方法：

二：模块化

store/index.js:

store/home.js:

使用方法：

---

---

安装

cnpm i vuex@4

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'//一

const app = createApp(App)

app.use(store)//二

app.mount('#app')

 

一：无模块化

store/index.js:

//store/index.js
import { createStore } from 'vuex'

export default createStore({
    actions: {
        // context 上下文对象，可以理解为store
        sum_actions(context, num) {
            setTimeout(() => {
                context.commit('sum', num)  // 通过context去触发mutions中的sum
            }, 1000)
        }
    },
    mutations: {
        // 传入 state
        increment(state) {
            state.count++
        },
        sum(state, num) {
            // console.log(num);
            state.count += num.value
        }
    },
    state: {
        num: 0,
        str: '这是state数据',
        count:0
    },
    getters: {
        getterCount(state, getters) {
            // console.log(state);
            return state.count +"我是getters"
        }
    }
})

使用方法：

<template>
  <div>
    <div>
      Vuex仓库的值:
      <span>
        {{ state.num }}
        {{ state.str }}
        <!-- getters的用法 -->
        {{$store.getters.getterCount}}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";//引入

//#region  Vuex
let store = useStore();

//state
let state = store.state;
// console.log(store.state);

//actions
store.dispatch('sum_actions', num)

//mutations
store.commit("increment");

const add = (num) => {
  store.commit("sum", num);
};
//#endregion

</script>

二：模块化

store/index.js:

//store/index.js
import { createStore } from 'vuex'

import home from './home'

export default createStore({
    modules: {
        'home':home
    }
})

store/home.js:

// store/home
export default {
    actions: {
        // context 上下文对象，可以理解为store
        sum_actions(context, num) {
            setTimeout(() => {
                context.commit('sum', num)  // 通过context去触发mutions中的sum
            }, 1000)
        }
    },
    mutations: {
        // 传入 state
        increment(state) {
            state.count++
        },
        sum(state, num) {
            // console.log(num);
            state.count += num.value
        }
    },
    state: {
        num: 0,
        str: '这是state数据',
        count: 0
    },
    getters: {
        getterCount(state, getters) {
            // console.log(state);
            return state.count + "我是getters"
        }
    }
}

使用方法：

<template>
  <div>
    <div>
      Vuex仓库的值:
      <span>
        {{ state.num }}
        {{ state.str }}
        <!-- getters的用法 -->
        {{$store.getters.getterCount}}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";

//#region  Vuex
let store = useStore();

//state
let state = store.state.home;//这里使用了模块化
console.log(store);

//actions
store.dispatch('sum_actions', num)

//mutations
store.commit("increment");

const add = (num) => {
  store.commit("sum", num);
};
//#endregion
</script>