Application of the counts and the 09-vuex demo

1. New store.js, creating an object store, and that the configuration

Vue from Import 'VUE'; 
Import Vuex from 'vuex'; 

Vue.use (Vuex); 

const = Store new new Vuex.Store ({ 
  // items stored initial values State 
  State: { 
    COUNT: 0 
  }, 
  mutations: { 
    updateCount (State, NUM) { 
      state.count NUM = 
    } 
  } 
}); 

Export default Store;

2. At the entrance index.js file inside: new Vue objects in injecting store　　

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';

import store from './store/store'

import './assets/styles/global.styl';

import createRouter from './config/router';

Vue.use(VueRouter);
const router = createRouter();

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

. $ Store get store objects in the project 3. internal components through this

<template>
  <div id="app">
    <div id="cover"></div>
    <Header></Header>
    <p>{{count}}</p>
    <router-view/>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './layout/header.vue'
  import Footer from './layout/footer.jsx'

  export default {
    mounted() {
      console.log(this.$store);
      let i =1;
      setInterval(()=>{
        //通过store的commit方法调用mutation,传入mutation的函数名称和参数
        this.$store.commit('updateCount',i++);

      },1000)
    },
    computed:{
      count(){
        return this.$store.state.count;
      }
    },
    components: {
      Header,
      Footer
    }
  }
</script>