vue3使用mapState

在 Vue3 中，使用 `mapState` 辅助函数来从 Vuex store 中获取状态值，可以通过以下步骤进行操作：

1. 首先，确保你已经安装了 `vuex`，可以通过运行以下命令来安装：

npm install vuex```

2. 在你的 Vue3项目中，创建一个 `store` 文件夹，并在其中创建一个 `index.js` 文件。在该文件中，导入 `createStore` 函数，并创建 Vuex store 实例。例如：

const store = createStore({
state: {
// 状态值 count:0,
username: 'John Doe'
},
mutations: {
// 突变方法 increment(state) {
state.count++
},
setUsername(state, name) {
state.username = name }
},
actions: {
// 异步操作 asyncIncrement({ commit }) {
setTimeout(() => {
commit('increment')
},1000)
}
}
})

export default store```

3. 在你的 Vue3 组件中导入 `mapState` 函数，并使用它来映射 Vuex store 中的状态值。例如：

 <div>
 <p>Count: {{ count }}</p>
 <p>Username: {{ username }}</p>
 <button @click="increment">Increment</button>
 <button @click="changeUsername">Change Username</button>
 </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
 computed: {
 ...mapState(['count', 'username'])
 },
 methods: {
 increment() {
 this.$store.commit('increment')
 },
 changeUsername() {
 this.$store.commit('setUsername', 'Jane Doe')
 }
 }
}
</script>

在上述代码中，`mapState` 函数将 `count` 和 `username` 映射为组件的计算属性，这样你就可以直接在模板中使用它们了。对应的突变方法可以通过 `this.$store.commit` 来调用。

这就是在 Vue3 中使用 `mapState` 的基本方法。希望对你有所帮助！