vuex--bus

bus 开胃小菜

• 目的是解决兄弟组件之间的通信问题

目录解构

├── index.html
├── bus.js
├── main.js  // 主要文件
├── components
│   ├── a.vue
│   └── b.vue
│   └── ...
└── ...

bus.js

import Vue from 'vue'     // 导入 Vue 生成实例并且导出
const Bus = new Vue()

export default Bus

main.js

import Bus from './bus'     // 假设是同级关系

Vue.prototype.$bus = Bus  // 挂载

组件间通信 a.vue 到 b.vue

// 在 a.vue 的 方法中
methods: {
  handleBus() {
    this.$bus.emit('自定义事件名称需要一致', '传的值')
  }
}

// 在 b.vue 的 钩子函数中 mounted
mounted() {
  this.$bus.on('自定义事件名称需要一致', res => {
    console.log(res)
  })
}

vuex 基操

基本的目录解构

├── index.html
├── main.js  // 主要文件
├── App.vue  // 主要文件
├── components
│   ├── store.vue   // 操作文件
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 根级别的 state
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    ├── getters.js        # 根级别的 getters
    └── modules
        └── user.js       # 模块

store/index.js

import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
import actions from "./actions";
import mutations from "./mutations";
import state from "./state";
import user from "./module/user";  // 以上后面会细讲, 先一次性引入和挂载

Vue.use(Vuex);  

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

main.js 入口文件

import Vue from 'vue'
import App from './App.vue'
import store from './store'  // 引入 挂载

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

/store/state.js 根级 state

// export default {     // 简洁写法
//   appName: 'admin'
// }

const state =  {        // 清晰点的写法
  appName: 'admin'
}
export default state

/store/modules/user.js 模块

const state =  {
  userName: 'great'
}

state 取值相关

• 展示组件中获取 根级别 以及 模块中 state 的值 下面展示了组件中的 script 部分, 后续将简写

<script>   ############# 1. 基本操作获取 state
export default {  
  computed: { // 1. 获取 state 基础方法
    appName() {  
      return this.$store.state.appName  // 根级模块方式
    },
    userName() {
      return this.$store.state.user.userName  // // 模块 user 方式  需要加上模块名
    }
  }
}
</script>

<script>  ############# 2. vuex 中的 mapState 获取 state
import {mapState} from 'vuex'

export default {  
  computed: {
    // 第一种写法
    ...mapState(['appName']), // 该方法只适合根级别
    // ...mapState(['userName']) // 模块无效

    // 第二种写法  // 该方法在模块开启命名空间也是 有效的
    ...mapState({
      appName: state => state.appName // 第一个 appName 只是参数名,可以随意; 第二个 appName 需要跟定义时一致
    }),
    ...mapState({
      userName: state => state.user.userName // 需要加上模块
    })
    // 模块中有 命名空间的情况
    ...mapState('user', {
      userName: state => state.userName // 不需要模块名
    })
  }
}
</script>

<script>  ############# 3. 模块中有命名空间的情况 模块独享方法
import {createNamespacedHelpers} from 'vuex'
const {mapState} = createNamespacedHelpers('user')
export default {  
  computed: {
    ...mapState(['userName']) // 获取user模块中的值
  }
}
</script>

getters 方法取值

const getters: {
  newAppname: state => {
    return `${state.appName}@@`
  }
}

computed: {
    newAppname(){
      return this.$store.getters.newAppname
    }
    ...mapGetters(['newAppname']) // vuex mapGetters
  }

moutations 方法

const mutations = {
   SET_APP_NAME(state, params){ // params 参数
     state.appName = params
   }
}

methods: {
  ...mapMutations(["SET_APP_NAME"]),  // // vuex mapMutations

  handleMutations() {
     this.$store.commit('SET_APP_NAME', value)  // 写法一  // // 原生写法
     this.$store.commit('SET_APP_NAME', {
       value: value  // 此时的 params 是一对象
     })  // 写法二
     this.$store.commit({
       type: 'SET_APP_NAME', // 属性值必须是 type
       value: value
     })  // 写法三

    this.SET_APP_NAME(参数) // //  使用 vuex
   }
  }

actions 方法

const actions = {
  updateAppname({commit}, ){ // params 参数
     commit('SET_APP_NAME')
   }
}

methods: {
  ...mapActions(['updateAppname'])
  handleActions() {  
     this.$store.dispatch("updateAppname", 传参) // 原生

     this.updateAppname(传参) // vuex mapAction
   }
  }

动态加载模块

methods: {
  registerModule() {
    this.$store.registerModule('todo', {
      state: {
        todolist: [
        'learning mutations',
        'learning actions'
        ]
      }
    })
  }
},
computed: {
  ...mapState({
    todolist: state => state.todo && state.todo.todolist // 一开始 state.todo 没有值
  })
}