vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2 @click="handleClick">{{name}}</h2>
  </div>
</template>
<script>
import { toRefs } from 'vue';
import {useStore} from "vuex"
export default {
  setup() {
    const store = useStore();
    // const name = store.state.name;
    const {name} = toRefs(store.state);
    const handleClick = ()=>{
      store.commit("change","123456")
    }
    return {
      name,
      handleClick
    }
  },
}
</script>
​

store/index.js

import { createStore } from 'vuex'
// Vuex 全局数据管理器
// Vuex 创建了一个全局唯一的仓库,用来存放全局的数据
export default createStore({
  state: {
    name:"hello world"
  },
  // mutaion 里面只允许写同步代码,不允许写异步代码
  // commit he mutations 做关联
  mutations: {
    change(store,str){
      console.log(store)
      this.state.name = "hello "+str
    }
  },
  // dispatch 和 cations 做关联
  actions: {
    // 第二部 store 感知到了触发了一个叫 change 的 action ,执行change
    change(){
      // 第三部 提交一个commit 触发一个 mutation
      this.commit('change')
    }
  },
  modules: {
​
  }
})