vue项目中引入vuex

今天药忘吃喽~ 2022-09-09 15:49 293阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]  
如果说vue-router 解决了vue 组件与路由的一一映射问题，那vuex就是对应解决了vue的状态管理。  
如果对vur-router引入和vue基础项目搭建有疑惑的读者可以移步  
[vue 项目中引入vue-router][vue _vue-router]  
由于vuex同样是外部依赖，所以安装也就是vuex的第一步：

npm install vuex --save

### 在src目录下新建store文件夹 ###

![在这里插入图片描述][eeb4b495894a4baf8ed209ffa329c417.png]

index.js
    //引入外部依赖
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    //新建store实例
    const store = new Vuex.Store({ 
      state: { 
        name: 'Rowland'
      },
      mutations: { 
        changeName(state) { 
          state.name = 'lily';
        }
      }
    })
    //导出store
    export default store;

### main.js中添加store ###

import Vue from 'vue'
    import App from './App.vue'
    
    
    import store from './store';
    
    new Vue({ 
      render: h => h(App),
      store
    }).$mount('#app')

这样就可以在组件中调用以及在mutation中声明的方法了

$store.state.name

methods: { 
        handleChildOneClick() { 
          this.$store.commit('changeName');
        }
      }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/45ad8acaac0f490a9c1e4fec6ebeab1e.png
[vue _vue-router]: https://blog.csdn.net/qq_43277404/article/details/120053734?spm=1001.2014.3001.5501
[eeb4b495894a4baf8ed209ffa329c417.png]: /images/20220829/33406bddd76e4131b259fb4bcf5a7b6f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目中引入vant

vue项目中引入vant 本文讲解再vue项目里面如何引入vant，我推荐再vue项目里面引入vant，不推荐创建vant项目，因为会出现很多奇怪的格式错误。详情

我就是我/ 2024年03月16日 15:48/ 0 赞/ 38 阅读

相关 vue项目引入全局vuex

Vuex 是一个全局的共享数据存储区域，相当于一个数据的仓库，Vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组

爱被打了一巴掌/ 2023年06月29日 13:59/ 0 赞/ 9 阅读

相关 vue项目中使用vuex

说明 > 此处仅做简单的记录，并没有详细的去整理。步骤 1、通过命令在项目根目录安装vuex npm install vuex --save-d

Dear 丶/ 2023年01月13日 05:57/ 0 赞/ 201 阅读

相关 vue项目中引入element

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

本是古典何须时尚/ 2022年09月10日 10:11/ 0 赞/ 259 阅读

相关 vue项目中引入echarts

关于如何搭建vue项目，引入vue-router和vuex。请移步 [vue项目中引入vue-router][vue_vue-router] [vue项目中引入vu

àì夳堔傛蜴生んèń/ 2022年09月10日 02:14/ 0 赞/ 358 阅读

相关 vue项目中引入vuex

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

今天药忘吃喽~/ 2022年09月09日 15:49/ 0 赞/ 294 阅读

相关 vue项目中引入vue-router

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

拼搏现实的明天。/ 2022年09月09日 14:51/ 0 赞/ 331 阅读

相关 Vuex的使用（一）——在项目中引入Vuex

参考文档：https://vuex.vuejs.org/zh/guide/ 如果当前没有项目代码，可以访问[传送门][Link 1]搭建一个，以下Vuex相关功能都是在传送门

港控/mmm°/ 2022年09月09日 06:41/ 0 赞/ 240 阅读

相关在vue项目中引入vuex(全局状态管理器)

目录 Vuex是什么？ State Getter Mutation Action Module 项目结构 -------------------- V

灰太狼/ 2022年02月01日 01:13/ 0 赞/ 380 阅读

相关在vue项目中使用vuex

首先在npm中安装vuex npm install vuex --save ![clipboard.png][] 安装成功在vue项目目录下建立sto

朱雀/ 2021年07月27日 01:02/ 0 赞/ 484 阅读