首页 > 其他分享 >Vue 中 vuex 的使用

Vue 中 vuex 的使用

时间:2023-11-23 16:47:04浏览次数:34  
标签:Vue vuex actions 使用 import Vuex store

一、内容:
1.vuex 是 vue 中实现“集中式数据管理”的一个 vue 插件。
2.被管理的数据,是组件共享的,任意组件都可以访问管理。
3.vuex 包含三个部分:actions(动作), mutations(加工), state(状态)。
4.工作原理:
(1)组件欲发起动作(即修改数据)。
(2)向vuex中的actions分发(dispatch)动作,
(3)actions向mutations提交(commit)动作;
(4)mutations加工state;
(5)state 发生变化,vuex 渲染组件页面。

  注意:在 actions 中,集中处理业务逻辑,或其他准备工作(如,向服务器请求数据)等。
  如不需要业务处理,则可以忽略,即组件可以略过 actions 直接向 mutations 提交动作。
5.由 store(仓库) 统一管理 actions, mutations, state,组件只与 store 打交道。

二、安装:
执行命令:cd xxxx(项目目录)
执行命令:npm i vuex@3 【vue2 项目使用 vuex@3, vue3 项目使用最新版vuex】

三、引入‘Vuex 插件库’:
在main.js中添加:

import Vuex from 'vuex';
Vue.use(Vuex);

四、创建 store

在 src 目录下创建目录 store,在目录 store 下创建文件 index.js。
在 index.js 中创建 actions, mutations, state, 并new 一个 store:

//用于构建 vuex 的 store
import Vuex from 'vuex';

const actions ={

};

const mutations ={

};

const state ={

};

const store = new Vuex.Store({    
    actions,
    mutations,
    state
});

export default store;

五、引入配置好的‘store’,并将其交给 vm:

在 main.js 添加:

import Vue from 'vue';
import Vuex from 'vuex'; import store from './store'; import App from './App.vue'; Vue.config.productionTip = false; Vue.use(Vuex); export default new Vue({ el:'#app', render: h => h(App), store });

六、修改引入顺序

1.需要修改的原因是:
  在 main.js 中,import store from './store'; 先于 Vue.use(Vuex); 执行,这将导致 store/index.js 中的 new Vuex.Store() 先于 Vue.use(Vuex);  执行;
  而 Vue.use(Vuex); 必须在 new Vuex.Store() 之前。
2.修改的方式:
(1)在 main.js中移除语句:import Vuex from 'vuex'; 和 Vue.use(Vuex);
(2)在目录 store 下 index.js 文件中,添加 import Vue from 'vue'; 在 new Vuex.Store() 之前, 添加语句:Vue.use(Vuex); 
(3)index.js 实际为:

//用于构建 vuex 的 store
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const actions ={

};

const mutations ={};

const state ={};

const store = new Vuex.Store({    
    actions:actions,
    mutations:mutations,
    state:state
});

export default store;
View Code

main.js 实际为:

import Vue from 'vue';
import store from './store';
import App from './App.vue';

Vue.config.productionTip = false;

export default new Vue({
  el:'#app',
  render: h => h(App),
  store
});
View Code

七、使用

1.组件中使用vuex中的数据: this.$store.state.xxxdata
2.组件中修改vuex中的数据: this.$store.dispatch('actionname', value) 或 this.$store.commit('mutationname', value)
3.import { mapState, mapGetters } from 'Vuex';
computed:{...mapState(['sum'])}

标签:Vue,vuex,actions,使用,import,Vuex,store
From: https://www.cnblogs.com/jmllc/p/17851907.html

相关文章

  • Kali使用Aircrack-ng进行暴力破译WIFI密码
    @TOC一、什么是Aircrack-ngAircrack-ng是一个与802.11标准的无线网络分析有关的安全软件,主要功能有:网络侦测,数据包嗅探,WEP和WPA/WPA2-PSK破译。Aircrack-ng可以工作在任何支持监听模式的无线网卡上(设备列表请参阅其官方网站)并嗅探802.11a,802.11b,802.11g的数据。该程序可运行在Linux......
  • Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
    1、需求使用Vue+ElementUI实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。2、实现1)列表页index.vue<el-table><!--其他列--><el-table-columnlabel="操作"width="150"><templateslot-scope=......
  • 【Quarkus】使用Buffer直接操作响应流
    importio.vertx.core.buffer.Buffer;importio.vertx.core.buffer.impl.BufferImpl;importio.vertx.core.http.HttpHeaders;importio.vertx.core.http.HttpServerResponse;importio.vertx.ext.web.RoutingContext;importjakarta.ws.rs.Consumes;importjakarta.ws.......
  • 使用EF8在Core8中出现的奇葩bug
    1.add-migrationaddtable 一切正常  2.在update-database-verbose出现奇葩bug System.Globalization.CultureNotFoundException:Onlytheinvariantcultureissupportedinglobalization-invariantmode.Seehttps://aka.ms/GlobalizationInvariantModeformore......
  • MAUI Sqlite数据库的使用
    1、安装1)Nuget中搜索sqlite-net-pcl安装2)搜索安装sqlitepclraw.bundle_green2、使用FileSystem.AppDataDirectory:获取可存储应用数据的位置1)建一个常量类,方便使用,文件名constants.cs2)再在services文件夹建一个DatabaseService.cs,使用sqlite数据库的类3、自增列创建类属性......
  • Kubernetes进阶之使用二进制包部署集群
    前言之前关于Kubernetes有写过文档参考:Kubernetes入门进阶课程https://www.cnblogs.com/minseo/category/1654539.html本文针对操作系统以及软件的新版本补充使用二进制包部署集群之前版本部署参考:https://www.cnblogs.com/minseo/p/12361731.html......
  • uniapp开发[Vue warn]: Unhandled error during execution of scheduler flush. This
    如下,uniapp开发nvue页面报如下警告:15:30:25.079[Vuewarn]:Unhandlederrorduringexecutionofrenderfunctionat<UniGroupclass="w710cell_groupbg_whiteborder_radius16flex_row"top="10">at<Index__pageId=1__pagePath="pages/g......
  • 231103 - i18n Ally 国际化插件使用说明
    231103-i18nAlly国际化插件使用说明i18nAlly国际化插件使用说明搜索安装插件;在项目下的settings.json加入如下配置,localesPaths要结合项目目录进行配置;"i18n-ally.annotationInPlace":false,"i18n-ally.displayLanguage":"zh-chs","i18n-ally.sour......
  • frp的使用
    frp官网https://gofrp.org/zh-cn/https://github.com/fatedier/frp/releases安装下载(本次使用的本版是frp_0.52.3)安装服务端(公网服务器端)#工作目录mkdir-p/usr/local/frp/#下载wgethttps://github.com/fatedier/frp/releases/download/v0.52.3/frp_0.52.3_linux_amd6......
  • Docker中使用elasticsearch
    Docker中使用elasticsearch1、docker拉取elasticsearch:7.17镜像这里我们拉取7.17.10版本:dockerpullelasticsearch:7.17.102、创建自己的配置文件并写入基础数据供后续挂载后直接启动使用【非必选,在不指定挂载配置文件启动的情况下可不设置】创建文件夹后,新建一个自己的e......