搭建vuex环境

最新推荐文章于 2024-08-18 11:15:52 发布

.luluHoney

最新推荐文章于 2024-08-18 11:15:52 发布

阅读量99

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50443809/article/details/124764017

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中使用Vuex进行组件间的状态管理，包括创建store、定义actions、mutations和state，以及在`main.js`中配置store。通过实例演示了如何确保数据同步和组件间的高效协作。

摘要由CSDN通过智能技术生成

1. 创建文件：```src/store/index.js```

```js


   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   })
   ```

2. 在```main.js```中创建vm时传入```store```配置项

```js


   //引入store
   import store from './store'//文件夹中只有一个文件写到文件夹那一级就行

   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })
   ```