vue使用vuex

以你之姓@ 2022-11-05 11:49 227阅读 0赞

[Vue安装vuex][Vue_vuex]

1.安装：

进入项目路径后，在项目终端输入：npm install vuex --save 或者 cnpm install vuex --save

2.安装完成后，会在项目的package.json文件中显示vuex插件，如下：

"dependencies": {
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "vuex": "^3.3.0"
      },

3.再项目src目录中新建store.js,文件内容如下：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
        //所有的数据都放在state中
        state:{},
    
        //操作数据，唯一的通道是mutations
        mutations:{},
    
        //actions,可以来做异步操作，然后提交给mutations，而后再对state(数据)进行操作
        actions:{}
    })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

4.在main.js中应用vuex:

导入store，然后再new Vue中使用，代码如下：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'   //导入store
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,   //在new Vue中使用
      components: { App },
      template: '<App/>'
    })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

[Vue_vuex]: https://www.cnblogs.com/jingzaixin/p/12814194.html
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221023/cee446c525fd41ea8e51bb5297a5ccc2.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue--Vuex--使用/教程/实例

原文网址：[Vue--Vuex--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--Vuex--_IT_-CSDN] 简介说明本文介绍Vue的插

谁践踏了优雅/ 2023年10月01日 16:02/ 0 赞/ 1 阅读

相关 vue-----vuex

使用vuex来实现登录功能,并缓存登录状态项目中安装vuex npm install vuex --save 在main.js中引用 import s

秒速五厘米/ 2023年06月13日 03:18/ 0 赞/ 7 阅读

相关 vue项目中使用vuex

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

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

相关 vue使用vuex

[Vue安装vuex][Vue_vuex] 1.安装：　　进入项目路径后，在项目终端输入：npm install vuex --save 或者 cnpm install

以你之姓@/ 2022年11月05日 11:49/ 0 赞/ 228 阅读

相关 Vue3 中使用Vuex

[vue3.x使用vuex\_small streamed bun-CSDN博客\_vue3 vuex][vue3.x_vuex_small streamed bun-CSDN

骑猪看日落/ 2022年09月11日 10:13/ 0 赞/ 220 阅读

相关 Vue - vuex使用

场景：vue全局获取登录用户名一、main.js里配置安装 //安装vuex状态管理模式 import Vuex from 'vuex'

野性酷女/ 2022年05月19日 03:16/ 0 赞/ 258 阅读

相关 vue vuex

1.vuex 是一个专门为vue.js应用程序开发的状态管理模式（一般由 main.js 引入，是全局数据：用于组件间通信的共享数据） 2. 关键对象 state：存储

古城微笑少年丶/ 2021年11月01日 06:34/ 0 赞/ 420 阅读

相关 vue - vuex的综合使用

vuex的多模块使用目录结构 |-store |–index.js |–modules |–a.js |–b.j

喜欢ヅ旅行/ 2021年09月19日 12:52/ 0 赞/ 359 阅读

相关 Vue.js--Vuex使用详解

![在这里插入图片描述][20200202190819203.png] Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储

女爷i/ 2021年08月24日 14:58/ 0 赞/ 458 阅读

相关 Vue - Vuex的使用

Vuex的使用 1. Vuex 是什么？ 2. 使用 Vuex 统一管理状态的好处 3. 什么样的数据适合存储到 Vuex 中 4. Vuex 的

本是古典何须时尚/ 2021年07月25日 20:36/ 0 赞/ 517 阅读