Vuex

参考文档

Vue2中使用Vuex

1. 安装Vuexnpm install Vuex

2. 创建store

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'
import labs from './labs'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        user,
        labs
    }
})

// store/user.js
export default {
    namespaced: true,
    state: {},
    mutations: {},
    actions: {
        // 可进行异步操作
        // 调用matations中的方法
    }
}

3. 将Vuex实例添加到Vue实例中使用

import store from './store'

new Vue({
    store,
    render: h => h(app)
}).$mount(#app)

4. 在组件中使用Vuex

// 在组件中获取state数据
this.$store.state.user.userInfo

// 通过mapState获取state数据，然后就可以直接使用变量，不通过通过store调用
computed: {
    ...mapState('user', ['userInfo', 'isLogin']),
    ...mapState('labs', ['platformInfo', 'isPlatformInfo'])
}

computed:mapState('user', ['userInfo', 'isLogin'])

// 调用actions中的方法通过，dispatch调用
this.$store.dispatch('user/login') // 调用user模块中actions的login方法

Vue3中使用Vuex

1. 安装Vuexnpm install Vuex

2. 创建store

// store/index.ts
import { createStore } from 'vuex
import user from './user'
import labs from './labs'

const store = createStore({
    modules: {
        user,
        labs
    }
})

export default store

// store/user.ts
export default {
    namespaced: true,
    state: {},
    mutations: {},
    actions: {
        // 可进行异步操作
        // 调用matations中的方法
    }
}

3. 将Vuex实例添加到Vue实例中使用

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

const app = createApp()
app.use(store)
app.mount('#app")

4. 在组件中使用Vuex

import { useStore } from 'vuex'
import { defineComponent, computed } from 'vue'
export default defineComponent({
    setup() {
        const store = useStore()
        
        // 获取state的数据，store.state.user.isLogin
        const isLogin = computed(() => store.state.user.isLogin)
        
        
        // 调用actions的方法，user模块的login方法
        store.dispatch('user/login')
        
        return {
            isLogin // 通过return 返回，就可以在template模板中使用isLogin
        }
    }
})