Vue3 store配置以及简单示例
vue版本升级后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
更多推荐
已为社区贡献1条内容
所有评论(0)