Vue3 如何使用 vuex

准备工作

• 第一步：npm install vuex@next --save 或者 yarn add vuex@next --save
• 第二步：在根目录 src 下新建 store 目录并新建 index.js 文件

下面是src/store/index.js文件的代码

import {
    
     createStore } from 'vuex'
const store = createStore({
    
    
  state() {
    
    
    return {
    
    
      title: 'Hello, Vuex',
      count: 0
    }
  },
  mutations: {
    
    
    increment(state) {
    
    
      state.count ++
    }
  }
})

export default store

• 第三步：在项目入口 main.js 文件里面引入进来

import {
    
     createApp } from 'vue'
import App from '@/App.vue'
import store from '@/store/index.js' // 引入
const app = createApp(App)
app
// ...
.use(store)
.mount('#app')

export default app

至此就完成啦

使用

代码如下

<template>
  <h2>{
    
    {
    
     state.title }}</h2>
  <div>{
    
    {
    
     state.count }}</div>
  <button @click="onCount">Count</button>
</template>
<script>
import {
    
     useStore } from 'vuex' 
import {
    
     computed } from 'vue'
export default {
    
    
	setup() {
    
    
		const store = useStore() // 引入 useStore 类似 vue2 的 this.$store
		
		const state = computed(() => {
    
     // 使用计算属性来监听数据的变化
			return store.state
		})

		const onCount = () => {
    
    
			store.commit('increment') // 触发 vuex 里定义的函数
		}

		return {
    
     // 返回出去供 template 模板访问
			state,
			onCount
		}
  }
}
</script>

效果图

好了，内容就到这里，另外笔者还整理了 Vue3 学习指南总结，有兴趣的话可以去瞧一瞧。