09-vuex基本应用之计数demo

1.新建store.js，创建store对象，并且相应配置

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  //state存放项目的初始值
  state: {
    count : 0
  },
  mutations:{
    updateCount(state,num){
      state.count = num
    }
  }
});

export default store;

2.在入口index.js文件里面：new Vue对象里注入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');

3.在组件内部可以通过this.$store获取项目中的store对象

<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>