vuex应用实例-this.$store.commit()触发

Posted leiting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex应用实例-this.$store.commit()触发相关的知识,希望对你有一定的参考价值。

新建文件夹store,store下:

action.js

const actions = {}
export default actions;

getter.js

const getters = {}
export default getters;

mutation-types.js

export const publicSetEvent = ‘publicSetEvent‘;

mutations.js

import {publicSetEvent} from ‘./mutation-types‘;

const mutations = {
    [publicSetEvent]: (state, json) => {
        // 是否显示头部title
        state.publicSet.headTitle = json.headTitle || state.publicSet.headTitle;
        // 是否显示头部tabbar切换
        state.publicSet.headNav = json.headNav || state.publicSet.headNav;
        // 头部显示的标题文字
        state.publicSet.sTitle = json.sTitle || state.publicSet.sTitle;
        // tabbar的标题文字及待办badge数字
        state.publicSet.navList = json.navList || state.publicSet.navList;
    }
}

export default mutations;

index.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import mutations from ‘./mutations‘;
import getters from ‘./getters‘;
import actions from ‘./actions‘;

Vue.use(Vuex);

const state = {
    publicSet: {//设置公共头
        headTitle: true,
        headNav: false,
        sTitle: ‘头部标题‘
    }
}

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

export default store;

头部公共组件components文件夹下

v-header.vue

<template>
  <div class="v-header">
    <vTitle v-if="publicSet.headTitle" :stitle="publicSet.sTitle"></vTitle>
  </div>
</template>

<script>
import vTitle from ‘./v-title‘;
import {mapState} from ‘vuex‘;
export default{
   name:‘v-header‘,
   components:{vTitle},
   data(){
    return{
      
    }
   },
   computed: {
       ...mapState([‘publicSet‘])
   }
}
</script>

 

v-title.vue

<template>
  <div class="v-title">
      <XHeader :left-options="{backText:‘‘}" :title="stitle"></XHeader>
  </div>
</template>

<script>
import { XHeader } from ‘vux‘
export default{
  name:‘v-title‘,
  props:[‘stitle‘],
  components:{XHeader},
  data (){
      return {
      }
  },
  methods: {
  }
}

</script>

<style lang="less">
</style>

 

App.vue

<template>
  <div id="app">
    <vHeader></vHeader>
    <router-view/>
  </div>
</template>

<script>
import vHeader from ‘@/components/header/v-header‘
export default {
  name: ‘app‘,
  components:{vHeader}
}
</script>

main.js

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import Vuex from ‘vuex‘
import store from ‘./store‘
Vue.use(Vuex)

Vue.config.productionTip = false

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

页面调用index.vue

<template>
    <div class="index">
    </div>
</template>

<script>
export default{
    name:‘index‘,
    data(){
        return{

        }
    },
    created(){
    },
    beforeRouteEnter(to,from,next){
        let option={
          headTitle:true,
      sTitle:‘我是新标题‘ } console.log(option); next(vm
=>{ vm.$store.commit(‘publicSetEvent‘,option); }) }, methods:{ } } </script> <style lang="less"> </style>

运行进去index页面就可以看到公共头了

以上是关于vuex应用实例-this.$store.commit()触发的主要内容,如果未能解决你的问题,请参考以下文章

vuex

vuex实现原理

Vue/Nuxt:如何在 vuex 商店中访问 Nuxt 实例?

vuex辅助函数介绍和使用

vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性

vuex学习总结