Vuex application Example-this. $store. Commit () trigger

Under New Folder Store,store:

Action.js

Const ACTIONS =default actions;

Getter.js

Const GETTERS =default getters;

Mutation-types.js

Export Const Publicsetevent = ' publicsetevent ';

Mutations.js

Import {publicsetevent} from './mutation-types '; Const Mutations={[publicsetevent]: (state, JSON)= {        //whether to show header titleState.publicSet.headTitle = Json.headtitle | |State.publicSet.headTitle; //whether to show head Tabbar toggleState.publicSet.headNav = Json.headnav | |State.publicSet.headNav; //header text for head displayState.publicSet.sTitle = Json.stitle | |State.publicSet.sTitle; //tabbar title text and Todo badge numbersState.publicSet.navList = Json.navlist | |state.publicSet.navList; }}exportdefaultMutations;

Index.js

 import vue from ' Vue ' import Vuex from  ' Vuex ' ;import getters from  './getters ' ;import actions from  './actions ' ; Vue.use (VUEX); const State  =    set common header  headtitle: true  , Headnav:  false  , Stitle:  ' Header title ' }}const store  = new  

Head public component under Components folder

V-header.vue

<template>  <div class= "V-header" >    <vtitle vif= "Publicset.headtitle": stitle= " Publicset.stitle "></vTitle>  </div></template><script>/v-title '  ' Vuex '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>' vux '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>' @/components/header/v-header 'default  {   ' app ',  Components:{vheader}}</script>

Main.js

import vue from ' Vue ' import app./app ' import router from './router ' import Vuex from ' Vuex ' import store from '. Store ' Vue.use (Vuex) Vue.config.productionTip = Falsenew Vue ({  el: ' #app ',  router,  store,  Components: {app},  Template: '<app/>'})

Page Call Index.vue

<template>    <div class= "index" >    </div></template><script>   Default{    name:' index ',    data () {        return{        }    },    Created () {    },    Beforerouteenter (to,from,next) {let        option={          headtitle:  True,
Stitle: ' I am the new title '        }        console.log (option);        Next (VM={          vm. $store. Commit (' publicsetevent ', option);        })    },    methods:{    }    }</script><style lang= "less" ></style>

Run in the index page to see the public header

Vuex Application instance-this. $store. Commit () trigger