vuex模块化（vuex的五个属性及使用方法）

本文目录

• vuex的五个属性及使用方法
• vuex基础总结
• vuex的五个属性是什么
• Vue使用vuex进行项目模块化，两种调用方式
• 模块化vuex，获取、设置数据，及刷新保留数据方法
• vuex配置对象参数的是
• VueX（Vue状态管理模式)

vuex的五个属性及使用方法

vuex的五个属性及使用方法如下：

基本属性：

1、state：vuex的基本数据，用来存储变量。

2、geeter：从基本数据(state)派生的数据，相当于state的计算属性。

3、mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4、action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

Vuex的用法：

新建vue项目testApp ==》 在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和 index.js ==》 store文件下建user.js。

在项目的main.js中引入  import store from ’./store’。

在store文件下的index.js中引入。

vuex基础总结

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。

上面的例子只是一个简单的组件间通信的例子，在实际项目中，组件间的通信往往比这要复杂的很多，所以说当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏
而vuex就是将所有状态集中管理起来，更加方便的实现组件间的通信，以往要实现数据的传递需要一步一步的向上传递，有了vuex，所有组件都可以向vuex中存数据，也可以取数据

多个组件共享数据或者是跨组件传递数据时

然后在组件中就可以通过this.$store访问到vuex了

state作为唯一的数据源，所有的共享数据都存放在state中，如：

vuex不允许在组件中修改state中的状态，如果想要修改state的数据，唯一的方法就是通过mutations修改，其实在组件中是可以直接修改的，但是这样通过mutations修改的方式，可以更加集中的监控所有数据的变化。
在mutations中定义一些修改state数据的方法，方法第一个参数就是state对象

（1）触发mutation的方法

这次是在组件的methods中，将mutation映射成methods的方法

（2）mutation传值（官网将传递的值称为载荷）
对于mutaion而言，方法接受的第一个参数始终是自身的state，第二个才是传递过来的参数，这个参数一般是一个对象，因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据

还可以写成一种对象的方式

mapMutations传值

（3）注意

actions和mutations类似，不同的是，actions是提交mutation修改共享数据，不是直接改变共享数据的，只有通过mutation才能修改state中的函数；actions中可以执行异步操作。actions中的每一个方法的第一个参数默认使context，是与 store 实例具有相同方法和属性的对象（context !== store对象）。而在组件中执行actions方法的方式就是：this.$store.dispatch(’方法名’)
比如定义一个定时器异步的使count自增

而提交mutation的方法是commit，利用解构赋值将commit结构出来，提交mutation修改state的值

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等，其实也可以理解为是类似vue的计算属性，函数接受一个参数state,也就是数据源，数据也是响应式的，state数据变化。getters里面的数据也会随之变化，不会修改state中的数据,第二个参数是getters，通过这个属性我们就可以访问到其他的getter了

组件中访问getters中的属性
其实和state差不多，就不多说了

下一节：vuex模块化

vuex的五个属性是什么

promise的使用场景 、axios使用教程、 vuex刷新页面数据丢失 、vuex页面刷新数据、vuex存储信息。

属性是一个汉语词汇，拼音是shǔ xìng。意思是人类对于一个对象的抽象方面的刻画。

一个具体事物，总是有许许多多的性质与关系，我们把一个事物的性质与关系，都叫作事物的属性。

事物与属性是不可分的，事物都是有属性的事物，属性也都是事物的属性。

一个事物与另一个事物的相同或相异，也就是一个事物的属性与另一事物的属性的相同或相异。

由于事物属性的相同或相异，客观世界中就形成了许多不同的事物类。具有相同属性的事物就形成一类，具有不同属性的事物就分别地形成不同的类。

苹果是一类事物，它是由许多具有相同属性的个别事物组成的。梨也是一类事物，它也是由许多具有相同属性的个别事物组成的。苹果和梨是两个不同的类。苹果这个类的共同属性是不同于梨这个类的共同属性的。

Vue使用vuex进行项目模块化，两种调用方式

刚开始接触uniApp看了一下vuex的使用方法，总结一下在项目中个人认为常用的架构，很实用，做一个新手学习笔记!!!

使用Vue创建项目,在项目内创建store目录，在目录内创建 index.js 文件，如下

模块化vuex，获取、设置数据，及刷新保留数据方法

1.模块化vuex
2.获取vuex中的数据
3.设置vuex中的数据
4.刷新之后，保留数据

数据结构

index.js

transaction.js模块

注意：namespaced是为了解决不同模块命名冲突的问题,分两种情况来写

获取vuex中的数据

设置vuex中的数据

如果将namespaced设置为false，则需要注意命名不能重复

也可以使用mapState,mapGetters,mapActions
安装

修改index.js配置，将数据保存到sessionStorage

vuex配置对象参数的是

1、安装和配置Vuex
1) vuex是一个插件，所以我们需要通过npm指令安装。
npm i vuex
2) 在main.js人口文件引入Vuex，插件需要应用就需要将插件应用Vue.use(Vuex)，这个是直接在main.js直接写Vuex的部分代码，不符合模块化这个思路，所以不建议这样去写。在开发中如果使用到vuex，一般是创建一个名为store的文件夹，在此文件夹下有一个index.js文件，在这写对应的vuex代码。
import Vue from ’vue’
import App from ’./App.vue’
// 引入Vuex
import Vuex from ’vuex’
Vue.use(Vuex)

const actions = {

}
const mutations = {

}
const state = {
perosn: {
name: ’张三’,
age: 18,
sex: ’男’
}
}

const store = new Vuex.Store({
actions, mutations, state
})
const vc = new Vue({
render: h =》 h(App),
store,
}).$mount(’#app’)

console.log(vc);
3) 这里是使用模块化写vuex代码，使用的是默认暴露，有一个要点要说一下，Vue.use必须写在这个文件里面，如果在main.js写Vue.use(Vuex)，由于框架先解析import里面文件，在外面写的Vue.use(Vuex)不能被里面的识别到，所有会报错。到这里Vuex的配置就好了，下面我们写组件来观察这个Vuex中的数据如何获取和修改。
// 这里写关于store的代码

// 引入vue
import Vue from ’vue’
// 引入Vuex
import Vuex from ’vuex’
Vue.use(Vuex)

const actions = {

}
const mutations = {

}
const state = {
person: {
name: ’张三’,
age: 18,
sex: ’男’
}
}
export default new Vuex.Store({
actions, mutations, state
})

配置完成后在控制台输出Vue对象可以看见

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 方法都有默认的形参：

( )

例如，我们编写一个方法，当被执行时，能把下例中的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 分割成 模块（module） 。每个模块拥有自己的 state、mutation、action、getter 、甚至是嵌套子模块——从上至下进行同样方式的分割。

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

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

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

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