您的当前位置:首页正文

vuex项目结构目录及一些简单配置介绍

2023-11-30 来源:气吉美食网
这篇文章主要介绍了vuex 项目结构目录及一些简单配置,需要的朋友可以参考下

首先先正经的来一段官网的"忠告":

vuex需要遵守的规则:

一、应用层级的状态应该集中到单个 store 对象中。

二、提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

三、异步逻辑都应该封装到 action 里面。

文件目录结构

文件之间的关系:

store文件夹 - 存放vuex的系列文件

store.js - 引入vuex,设置state状态数据,引入getter、mutation和action

getter.js - 获取store内的状态

mutation.js - 更改store中状态用的函数的存储之地

action.js - 提交mutation以达到委婉地修改state状态,可异步操作

简单而又普通的写法

store.js文件:

main.js文件中(从根组件注入store,就像注入router一样):

通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。

Getter.js 的简单配置( store 的计算属性,接受state为参数)

获取(某组件的计算属性内部):

可传参 的getter属性的简单配置

获取(某 组件的计算属性内部 ):

mutation.js简单配置:

触发(组件中)

触发(组件的)

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

基于firefox实现ajax图片上传

Ajax无刷新分页的性能优化方法

Ajax加载外部页面弹出层效果实现方法

小编还为您整理了以下内容,可能对您也有帮助:

vue项目各目录结构及作用

vue文件说明

1、main.js是我们的入口文件,主要作用是初始化vue实例,并使用我们需要的插件

    importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'/* eslint-disable no-new */

    new Vue({

        el:'#app',

        router,

        template:'',

        components: { App }

    })

2、App.vue是我们的跟组件,所有页面都是在App.vue下面进行切换的,可以理解为所有的组件都是App.vue的子组件,我们可以吧头部课底部及每个页面都出现的内容放在App.vue里面。

 import Hello from './components/Hello'

    export default {

        name: 'app',

        components: {

        Hello

        }

    }

#app {

    font-family: 'Avenir', Helvetica, Arial, sans-serif;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-align: center;

    color: #2c3e50;

    margin-top: 60px;

}

import Hello from'./components/Hello'exportdefault{ name:'app', components: { Hello }}

import Hello from'./components/Hello'exportdefault{ name:'app', components: { Hello }}

3、index.html文件入口

4、src放置组件和入口文件

5、node_moles为依赖的模块

6、config中配置了路径端口值等

7、build中配置了webpack的基本配置、开发环境配置、生产环境配置等

#app{font-family:'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}

详解如何在vue-cli中使用vuex

前言

众所周知,vuex 是一个专为 vue.js 应用程序开发的状态管理模式,在构建一个中大型单页应用中使用vuex可以帮助我们更好地在组件外部管理状态。而vue-cli是vue的官方脚手架,它能帮助我们方便的配置webpack。这样看来,有很大的可能我们需要同时使用vue-cli与vuex

如何在vue-cli中使用vuex

项目搭建及添加vuex

当我们使用vue-cli搭建一个vue项目的时候(假设项目名为learn-vuex),搭建完成后的文件目录是这样子的

首先使用npm install --save-dev vuex 把vuex添加到依赖,接下来就是如何在组件中使用vuex,大体上来说有以下两种形式。

通过 store 选项

如果vue-cli搭建成功,在src目录下会有一个main.js文件,main.js的主要作用是把项目中最顶层的app.vue组件挂载到DOM中,其他所有的组件都可以看做是app.vue的子组件。

在main.js中,做如下操作

import Vue from 'vue'

import App from './App'

import router from './router'

import Vuex from 'vuex';

Vue.config.proctionTip = false

//注意下面的代码

Vue.use(Vuex);

const store = new Vuex.Store({

state: {},

getters: {},

actions: {},

mutations: {}

});

//注意router选项,此处的写法等同于store: store

new Vue({

el: '#app',

router,

store,

components: { App },

template: '<App/>'

})

在组件中,就可以通过this.$store 来使用store实例

如果在项目中需要配置的vuex选项很多,我们则应该把vuex的相关代码分割到不同模块

在src下新建store文件夹,在文件夹中创建如下几个文件

我们可以随意设置文件名,但最好可以通过文件名就能判断出这个文件是用来干嘛的

index.js:整合各个模块,创建并导出vuex实例

rootState.js:配置vuex实例的state选项

getters.js:getter选项

mutations.js:mutations选项

actions.js:actions选项

在index.js中,我们需要

import Vue from 'vue';

import Vuex from 'vuex';

import state from './rootState.js';

import getters from './getters.js';

import mutations from './mutations.js';

import actions from './actions.js';

Vue.use(Vuex);

const store = new Vuex.Store({

state,

getters,

actions,

mutations

});

export default store;

剩下的四个文件配置都差不多一样,以rootState.js为例

const state = {

count: 0,

arr: [0,1,2,3,4,5]

}

export default state;

如此这般,在main.js中,我们需要编写的代码就减少了很多

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store/index';

Vue.config.proctionTip = false

new Vue({

el: '#app',

router,

store,

components: { App },

template: '<App/>'

})

将vuex实例挂载到vue原型链上

这是一种非主流的方式,主要是受axios启发,这里有一篇博客讲解如何在vue组件中使用axios,将axios挂载到vue原型链上是因为不能通过vue.use来使用axios

在这种方法中,我们需要

// 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/index';

Vue.config.proctionTip = false

//在vue中使用vuex必须先调用vue.use方法

Vue.use(Vuex);

//具体挂载到vue原型的哪个属性上,可以由我们自行决定

//遇到配置繁多的情况也可以进行分割

Vue.prototype.$store = new Vuex.Store({

state: {},

getters: {},

actions: {},

mutations: {}

});

//没有了store选项

new Vue({

el: '#app',

router,

components: { App },

template: '<App/>'

})

如此这般,还是可以通过this.$store 来使用vuex

VueX(Vue状态管理模式)

VueX 是适用于在 Vue 项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步 data 中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此, Vue 为这些被多个组件频繁使用的值提供了一个统一管理的工具—— VueX 。在具有 VueX 的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。

由于 VueX 是在学习 VueCli 后进行的,所以在下文出现的项目的目录请参照 VueCli 2.x 构建的目录。

以下步骤的前提是你已经完成了Vue项目构建,并且已转至该项目的文件目录下。

打开main.js

例如在App.vue中,我们要将state中定义的name拿来在h1标签中显示

或者要在组件方法中使用

注意,请不要在此处更改 state 中的状态的值,后文中将会说明

在Vue项目开发中,需要监控项目中得各种值,为了提高效率,Vue提供了一款浏览器扩展——VueDevtools。

在学习VueX时,更为需要使用该插件。关于该插件的使用可以移步官网,在此不再赘叙。

在VueX对象中,其实不止有 state ,还有用来操作 state 中数据的方法集,以及当我们需要对 state 中的数据需要加工的方法集等等成员。

成员列表:

首先, Vue 组件如果调用某个 VueX 的方法过程中需要向后端请求时或者说出现异步操作时,需要 dispatch VueX中 actions 的方法,以保证数据的同步。可以说, action 的存在就是为了让 mutations 中的方法能在异步操作中起作用。

如果没有异步操作,那么我们就可以直接在组件内提交状态中的 Mutations 中自己编写的方法来达成对 state 成员的操作。注意, 1.3.3节 中有提到,不建议在组件中直接对 state 中的成员进行操作,这是因为直接修改(例如: this.$store.state.name = 'hello' )的话不能被 VueDevtools 所监控到。

最后被修改后的state成员会被渲染到组件的原位置当中去。

mutations 是操作 state 数据的方法的集合,比如对该数据的修改、增加、删除等等。

mutations 方法都有默认的形参:

( [state] [,payload] )

例如,我们编写一个方法,当被执行时,能把下例中的name值修改为 "jack" ,我们只需要这样做

index.js

而在组件中,我们需要这样去调用这个 mutation ——例如在App.vue的某个 method 中:

在实际生产过程中,会遇到需要在提交某个 mutation 时需要携带一些参数给方法使用。

单个值提交时:

当需要多参提交时,推荐把他们放在一个对象中来提交:

接收挂载的参数:

另一种提交方式

为了配合Vue的响应式数据,我们在Mutations的方法中,应当使用Vue提供的方法来进行操作。如果使用 delete 或者 xx.xx = xx 的形式去删或增,则Vue不能对数据进行实时响应。

可以对state中的成员加工后传递给外界

Getters中的方法有两个默认参数

例如

组件中调用

由于直接在 mutation 方法中进行异步操作,将会引起数据失效。所以提供了Actions来专门进行异步操作,最终提交 mutation 方法。

Actions 中的方法有两个默认参数

例如,我们在两秒中后执行 2.2.2 节中的 edit 方法

由于 setTimeout 是异步操作,所以需要使用 actions

在组件中调用:

改进:

由于是异步操作,所以我们可以为我们的异步操作封装为一个 Promise 对象

当项目庞大,状态非常多时,可以采用模块化管理模式。Vuex 允许我们将 store 分割成 模块(mole) 。每个模块拥有自己的 state、mutation、action、getter 、甚至是嵌套子模块——从上至下进行同样方式的分割。

组件内调用模块a的状态:

而提交或者 dispatch 某个方法和以前一样,会自动执行所有模块内的对应 type 的方法:

如果把整个 store 都放在 index.js 中是不合理的,所以需要拆分。比较合适的目录格式如下:

对应的内容存放在对应的文件中,和以前一样,在 index.js 中存放并导出 store 。 state 中的数据尽量放在 index.js 中。而 moles 中的 Astore 局部模块状态如果多的话也可以进行细分。

【uni-app】Vuex介绍和使用

无论你是使用 HX 还是使用 vue-cl i创建的uniapp项目,都已内置 Vuex ,无需再进行安装

uni-app也像小程序一样有 globalData ,这是一种简单的 全局变量 机制

globalData 是简单的全局变量,如果使用状态管理,请使用 vuex

项目文件结构

1.在 main.js 中导入store文件。

2.组装模块并导出 store

3.定义cart.js模块(这里以购物车为例)

4.定义根级别的getters

5.使用

查看下效果

点击添加按钮

气吉美食网还为您提供以下相关内容希望对您有帮助:

vue项目各目录结构及作用

1、main.js是我们的入口文件,主要作用是初始化vue实例,并使用我们需要的插件     importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'/* eslint-disable no-new */  &amp;...

详解如何在vue-cli中使用vuex

通过 store 选项如果vue-cli搭建成功,在src目录下会有一个main.js文件,main.js的主要作用是把项目中最顶层的app.vue组件挂载到DOM中,其他所有的组件都可以看做是app.vue的子组件。 在main.js中,做如下操作import Vue...

【uni-app】Vuex介绍和使用

uni-app也像小程序一样有 globalData ,这是一种简单的 全局变量 机制 globalData 是简单的全局变量,如果使用状态管理,请使用 vuex 项目文件结构 1.在 main.js 中导入store文件。2.组装模块并导出 store 3.定义cart....

Vue项目启动过程以及配置

Vuex 主要有五部分:① 安装 vuex 接下来我们在 src目录 下创建一个 vuex 文件夹 并在 vuex文件夹 下创建一个 store.js 文件 文件夹目录 长得是这个样子 在保证我们处于我们项目下,在命令行输入下面命令,然后...

使用vue+vuex+koa2如何搭建开发环境

// 安装vuexnpm i vuex --savekoa2环境前端项目构建好了,就开始构建我们的后端服务。首先在你的开发工具(不管是webstorm还是sublime)里新建一个目录,用来搭建基于koa的web服务。在这里,我们不妨给这个目录起名为koa-demo...

VueX(Vue状态管理模式)

由于 VueX 是在学习 VueCli 后进行的,所以在下文出现的项目的目录请参照 VueCli 2.x 构建的目录。以下步骤的前提是你已经完成了Vue项目构建,并且已转至该项目的文件目录下。打开main.js 例如在App.vue中,我们要将...

vuex如何使用vuex如何使用

4、在文件中引入vue和vuex。vue的兼容性怎么解决?在项目开始的时候,要先确定项目是否兼容到IE8及一下的版本,因为vue支持IE8以及更低版本。1、ES6语法不支持 解决方法:引入babel-polyfill npminstall--savebable-polyfill...

vue项目history打包后部署在二级目录相关配置

1.vue-router 路由的文件的配置,根据自己部署的二级目录填写 2.在vue.config.js配置文件(如果没有新建一个,项目根目录下)3.在入口文件中index.html 的head 标签内加入 4.最后就是服务端部署配置,以nginx 为例 配置...

Vue项目开发过程中遇到的坑

1 从浏览器中了解这个应用的呈现结果,对整个应用具有的大功能模块有个大致了解,比如包含欢迎页、用户管理、业务数据查询等;2 学习了解Vue项目的默认目录结构及加载流程,比如文件index.html、package.json、main.js,目录/...

Vue项目集成vuex-persistedstate并配置部分持久化

在单页应用中Vue项目集成Vuex也就足够基本使用了,但是刷新页面的时候数据都会被清空,在某些情况下,我们需要这些状态能保存下来,比如登录后的用户信息、AccessToken、主题配置等。这里就需要vuex-persistedstate,他可以把数据保存...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

显示全文

相关阅读

热门推荐