<template>

  <div class="about">

    <h1 @click="changName">This is an about page</h1>

    <h1>{{name}}</h1>

  </div>

</template>

<script>

import {useStore} from 'vuex';

import {toRefs} from 'vue'; 

export default {

 name: 'About',

  setup(){

    const store=useStore();

    const {name}=toRefs(store.state);

    const changName=()=>{

      // 改变store中的数据第一步，使用store调用dispatch，传递active到store中的actions；第一个参数是指令名字。第二个参数是需要修改的内容

        store.dispatch('changName','hallo word');

    };

    return {name,changName}

  }

}

</script>

<template>

  <h1>{{name}}</h1>

</template>

<script>

import {useStore} from 'vuex';

import {toRefs} from 'vue'; 

export default {

  name: 'Home',

  setup(){

    const store=useStore();

    const {name}=toRefs(store.state);

    return { name }

  }

}

</script>

import { createStore } from 'vuex'

export default createStore({

  state: {

    name:'你好'

  },

  mutations: {

    // 在此处进行数据的修改，此处不能使用异步语句，如果是同步修改，也可以跳过第二步，直接修改。

    changName(state,str){

        state.name=str

    }

  },

  actions: {

    // 接收到传过来的active，调用commit方法，将修改指令再传递给mutations，第一个参数是指令名，第二个参数是需要修改成的内容

    changName(store,str){

      setTimeout(()=>{

        store.commit('changName',str)

      },2000)

    }

  },

  modules: {

  }

})