vue3.0的vuex

1. bus的使用

原理：其实bus就相当于一个vue实例，兄弟之间的数据传输是要基于vue实例（也就是创建好的bus）

创建一个bus.js文件

import Vue from 'vue'
const Bus = new Vue();
export default Bus

在maini.js中导入该文件

import Bus from './lab/bus'
Vue.prototype.$bus = Bus

email.vue发送数据

<template>
    <div class="email">
      <button @click="handleClick">按我</button>
    </div>
</template>

<script>
    export default {
        methods: {
            handleClick(){
                this.$bus.$emit('on-click', 'hello')
            }
        }
    }
</script>

tel.vue接收数据

<template>
    <div class="tel">
      <p>{{message}}</p>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                message: ''
            }
        },
        mounted(){
            this.$bus.$on('on-click', mes => {
                this.message = mes
            })
        }
    }
</script>

2.vuex

首先在store文件夹里的index.js中，定义vuex实例

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'         //单独出来的state
import mutations from './mutations' //单独出来的mutations
import actions from './actions'     //单独出来的actions
import user from './module/user'    //自定义模块，每个模块拥有自己的 state、mutation、action、getter

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
    user
  }
})

在main.js中定义：

import store from './store'

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

（1）怎么使用vuex呢：

①  state.js

const state = {
    appName: 'admin'
}

export default state

任意组件中：

<template>
    <div>
        <p>{{appName}}</p>
    </div>
</template>

<script>
export default {
    computed: {
        appName(){
            return this.$store.state.appName
        }
    }
}
</script>

②  在模块中定义

const state = {
  userName: 'gfz'
};

<template>
    <div>
        <p>{{userName}}</p>
    </div>
</template>

<script>
export default { 
    computed: {
        userName(){
            return this.$store.state.user.userName //user代表模块名
        }
    }
}
</script>

③  mapState

<template>
    <div>
        <p>appName: {{appName}}</p>
        <p>userName: {{userName}}</p>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState({
            appName: state => state.appName,
            userName: state => state.user.userName
        })
    }
}
</script>

（2） getters的使用：

在getters.js中，把getters定义到index.js中

const getters = {
    appNameWithVersion: (state) => {
        return state.appName + 'v2.0'
    }
}
export default getters

使用

①  直接使用

<template>
    <div>
        <p>appNameWithVersion: {{appNameWithVersion}}</p>
    </div>
</template>

<script>
export default {
    computed: {
        appNameWithVersion(){
            return this.$store.getters.appNameWithVersion
        }
    }
}
</script>

②  mapGetters

import { mapGetters } from 'vuex'

computed: {
    ...mapGetters([
        'appNameWithVersion'
    ])
},

定义在模块中其实也是差不多的用法

（2）mutations的使用

//mutations.js
const mutations = {
    SET_APP_NAME(state, params){
        state.appName = params
    }
}
export default mutations

<template>
    <div>
        <p>appName: {{appName}}</p>
        <button @click="handleChangeAppName">修改appName</button>
    </div>
</template>

<script>
export default {
    methods: {
        handleChangeAppName(){
            this.$store.commit('SET_APP_NAME', 'newAppName')
        }
    }
}
</script>

想自己在state中设置一个值

//mutations.js
import vue from 'vue'

const mutations = {
    SET_APP_VERSION(state){
        vue.set(state, 'appVersion', 'v2.0')
    }
}
export default mutations

<template>
    <div>
        <p>appName: {{appName}}</p>
        <p>userName: {{userName}}</p>
        <button @click="handleChangeAppName">修改appName</button>
        <p>{{appVersion}}</p>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
    methods: {
        handleChangeAppName(){
            this.$store.commit('SET_APP_NAME', 'newAppName');
            this.$store.commit('SET_APP_VERSION')
        }
    },
    computed: {
        ...mapState({
            appName: state => state.appName,
            appVersion: state => state.appVersion,
            userName: state => state.user.userName
        })
    }
}
</script>

mapMutations的使用

import { mapMutations } from 'vuex'
export default {
    methods: {
        ...mapMutations([
            'SET_APP_NAME'
        ]),
        handleChangeAppName(){
            // this.$store.commit('SET_APP_NAME', 'newAppName');
            // this.$store.commit('SET_APP_VERSION')
            this.SET_APP_NAME('newAppName');
        }
    }
}

使用mapMutations

const mutations = {
  SET_USER_NAME (state, params) {
    state.userName = params
  }
};

<template>
    <div>
        <p>userName: {{userName}}</p>
        <button @click="handleChangeUserName">修改用户名</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
    methods: {
        ...mapMutations([
            'SET_USER_NAME'
        ]),
        handleChangeUserName(){
            this.SET_USER_NAME('vue-cource')
        }
    },
    computed: {
        ...mapState({
            userName: state => state.user.userName
        }),
    }
}
</script>

（3） actions的使用

①  首先定义一个请求

export const getAppName = () => {
    return new Promise((resolve, reject) => {
        const err = null;
        setTimeout(() => {
            if(!err){
                resolve({code: 200, info: {appName: 'newAppName'}})
            }
            else{
                reject(err)
            }
        })
    })
}

在actions.js中

import {getAppName} from '@/api/app.js'

const action = {
    updateAppName({commit}){
        getAppName().then(res => {
            commit('SET_APP_NAME', res.info.appName)
        }).catch(err => {
            console.log(err)
        });
    }
}
export default action

最后在组件里面使用actions

<template>
    <div>
        <button @click="handleChangeAppName">修改appName</button>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
    methods: {
        ...mapActions([
            'updateAppName'
        ]),
        handleChangeAppName(){
            this.updateAppName();
        }
    }
}
</script>