Vue2与Vue3在搭建 Vuex 环境时的不同

首先下载安装vuex ,命令：npm i vuex
接着在src文件夹下创建store文件夹，在store文件夹下继续创建index.js，该文件用于创建Vuex中最为核心的store
Vue2中的使用：
在index.js中加入以下代码

import Vue from 'vue'
import Vuex from 'vuex' // 引入Vuex
Vue.use(Vuex) // 应用Vuex插件
const actions = {} // 准备actions——用于响应组件中的动作
const mutations = {} // 准备mutations——用于操作数据（state）
const state = {} // 准备state——用于存储数据
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})

在src/main.js中创建vm时传入store配置项

import Vue from 'vue'
import App from './App.vue'
import store from './store' // 引入store
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App),
store, // 配置项添加store
beforeCreate() {
Vue.prototype.$bus = this
}
})

而在Vue3中的使用则变为：
同样创建对应store文件夹以及index.js文件
在index.js中加入以下代码：

//引入vuex
import Vuex from 'vuex'

//准备actions--用于响应组件中的动作
const actions = {

};
//准备mutations--用于操作数据（state）
const mutations = {

};
//准备state--用于存储数据
const state = {

};

//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})

在src/main.js中创建vm时传入store配置项

import { createApp } from 'vue';
import App from './App.vue';
//引入store
import store from './store/index'


const app = createApp(App);
app.config.productionTip = false;
app
.use(store)
.mount('#app');

以上就是搭建Vuex环境时在Vue2和Vue3中的不同了，如有错误，请各位提出。
另外，请您随手关注一下本人公众号，您的关注是我最大的创作动力，感谢！

标签：const,actions,state,Vue2,Vue3,import,Vuex,store
来源： https://www.cnblogs.com/kolenyx/p/16497839.html