vue项目中引入vuex

今天药忘吃喽~ 2022-09-09 15:49 234阅读 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 条评论，234人围观）

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

相关阅读

相关 vue项目中使用vuex

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

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

相关 vue项目中引入less支持

一、less是什么 Less是一种CSS的扩展和动态样式表语言，CSS预处理器，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。Less是一种开源语言

骑猪看日落/ 2022年12月09日 05:17/ 0 赞/ 166 阅读

相关 vue项目中引入element

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

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

相关 vue项目中引入echarts

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

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

相关 vue项目中引入vuex

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

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

相关 vue项目中引入vue-router

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

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

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

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

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

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

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

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

相关 vue项目中引入Bootstrap,Jquery

转载于 [https://blog.csdn.net/Take\_up/article/details/77711848][https_blog.csdn.net_Take_

Love The Way You Lie/ 2021年09月17日 21:16/ 0 赞/ 504 阅读

相关在vue项目中使用vuex

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

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