vuex 的简单使用

获取导航标题

文件准备

建立关于vuex的俩文件，然后都引入到index里

开始撸代码

1. html下的代码

<template>
  <div class="assest">
       assest {{headerTitle}}
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data () {
    return {
    // 设置默认值
      title:"wel"
    }
  },
  // 取通过vuex改变后的值
  computed: mapState(['headerTitle']),
  methods:{

  }
}
</script>

2. main.js 实例化store

import store from "./Store";

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
})

3. Store 文件夹下的操作

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions.js';
import mutations from './mutations.js';
Vue.use(Vuex);
const state = {
   headerTitle:""
}
export default new Vuex.Store({
   state,
   actions,
   mutations,
});

actions.js

export default {
    // commit 为触发者(store)对象下的方法 { commit }是对象解构 ,接受的是 title 值
    setTitle({commit},title){
        // commit 触发 叫 SETTITLE的 mutation
        commit('SETTITLE',title)
    }
}

mutations.js

export default {
    SETTITLE (state, title) {
        // 作赋值处理
        state.headerTitle = title

    }
}

4. router 文件夹下的操作

index.js

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routers'

Vue.use(Router)

const router = new Router({

  routes

})
router.afterEach((to,from) =>{
  setTimeout(() => {
    // if 条件的简写
    // vuex 条件的取
    (to.meta) && (this.a.app.$store.dispatch('setTitle',to.meta.title))

  },0)
})
export default router

router.js 中写入meta对象