09-vuex基本应用之计数demo

Posted 2022-04-30 ipoodle

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>