图解在vue x中点击按钮累加数字

一、新建组件，准备暴露引入

 二、关闭语法检测，记得重启项目

三、找到HelloWorld.vue文件，写入代码

代码如下

<template>
  <New></New>
</template>
<script setup>
import { ref } from 'vue'
import New from './New.vue'

defineProps({
  msg: String,
  components :{New},
})

const count = ref(0)

</script>
<style scoped></style>

 四、找到New.vue文件，写入代码

代码如下

<template>
    <div>
        <p>state里的数据是 : {{ $store.state.Number }}</p>
        <p>state里的数据是 : {{ $store.state.String }}</p>
        <button @click="$store.commit('add', 10)">点击按钮增加数据 +10</button>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped></style>

运行结果