Vue3 store配置以及简单示例

使用版本为2.9.6的vue配置store一直不成功，查阅相关资料发现大部分解决方案都是基于vue3，于是也将vue版本升级，两个版本的部分配置方法存在一定差异，在此记录一下。

1. 首先升级vue版本

npm uninstall vue-cli -g
npm install -g @vue/cli@4.5.13

如果安装速度过慢，尝试将远程源换成淘宝镜像

2.创建新工程

npm create vuedemo
cd vuedemo
npm run serve

3.安装vue-router和vuex

npm install vuex
npm install vue-router

4.创建src/store.js，简单配置state进行测试

最初使用Vue.use(Vuex)报错，该种加载插件的方式为vue2版本使用

import Vuex from 'vuex'
const state = {
    name: "test"
}
const mutations = {
}
const getters = {
}
export default new Vuex.Store({
    state,
    mutations,
    getters
})

5.main.js挂载App(与vue2有区别)

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')

6.测试store能否正确读取，修改HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      
    }
  },
  computed:{
    msg(){
      return this.$store.state.name;
    }
  }
}
</script>

成功读取state