【Vuex】Vuex详解，一篇文章搞懂Vuex详细使用过程和代码编写

文章目录

1. 组件之间数据共享2. Vuex概述3.Vuex基本使用1）安装vuex依赖2）导入vuex包3）创建store对象4）store对象挂载到vue实例中5）利用vue ui脚手架创建vue项目

3. 项目基础知识1）格式化2）git提交

4. Vuex核心概念1）State1：访问State方法一2：访问State方法二

2）Mutation1：触发Mutation方法一2：触发Mutation方法二

3）Action1：触发Action方式一2：触发Action方法二

4）Getter1：使用getters的两种方法

5. Vuex综合案例

本篇博客跟学视频链接：Vuex从入门到实战_bilibili

1. 组件之间数据共享

父向子传值：v-bind 属性绑定

子向父传值：v-on 事件绑定

兄弟组件之间共享数据：EventBus

$on 接收数据的那个组件

$emit 发送数据的那个组件

2. Vuex概述

实现组件全局（数据）管理的一种机制，可以方便的实现组件之间共享数据，不同于上述三种传递值的方式。可以把vuex当成一个store仓库，可以集中管理共享的数据，并且存储在vuex中的数据都是响应式的，数据与页面同步。一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中。

3.Vuex基本使用

1）安装vuex依赖

npm install vuex --save

2）导入vuex包

import Vuex from 'vuex'

Vue.use(Vuex)

3）创建store对象

const store = new Vuex.Store({

// state 中存放全局共享的数据

state: {count:0}

})

4）store对象挂载到vue实例中

new Vue({

el: '#app',

render: h=>h(app),

router,

// 创建的共享数据挂载到vue实例

// 所有组件能够直接从store中获取到全局的数据

store

})

5）利用vue ui脚手架创建vue项目

复习一下吧：[保姆级教学]使用Vue ui创建一个完整的vue项目_使用vue ui创建vue项目-CSDN博客

详见另一篇文档

3. 项目基础知识

1）格式化

项目下创建文件.prettierrc，应与.gitignore同级，两句代码分别代表：去除分号，用单引号替换双引号。

{

"semi": false,

"singleQuote": true

}

2）git提交

4. Vuex核心概念

1）State

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

// 创建store数据源，提供唯一公共数据

const store = new Vuex.Store({

state: { count: 0 }

})

1：访问State方法一

注意在唯一根组件template中，可以省略this不写

2：访问State方法二

导入mapState并把所需要的State域中的属性映射为当前组件的计算属性。

2）Mutation

store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

// 定义唯一的state域变量

state: {

count: 0

},

// 只有 mutations 中定义的函数，才有权利修改 state 中的数据

// 注意mutations中的方法第一个参数必须是state而且必须带,否则无法调用state中的变量

mutations: {

// 不带参mutations

add(state) {

state.count++

},

// 带参数的mutations

addN(state, step) {

state.count += step

},

sub(state) {

state.count--

},

subN(state, step) {

state.count -= step

}

}

})

1：触发Mutation方法一

在vuex中不允许组件直接去修改全局域中的数据，必须通过Mutation来变更Store中的数据。 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化（可以监控是谁更改了State）。

addition.vue

2：触发Mutation方法二

同样的，用一个mapMutations将全局的Mutation函数映射到本组件中。

subtraction.vue

3）Action

如果我们想书写一个异步操作，如单击+1后等待1s后state域中的值才会发生变化，我们可以用js中的定时器来实现，但是vue不能在mutations函数中执行异步操作，此时我们引入Action。Action 用于处理异步任务。如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。

1：触发Action方式一

store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

// 定义唯一的state域变量

state: {

count: 0

},

mutations: {

add(state) {

// 不要在 mutations 函数中，执行异步操作

// setTimeout(() => {

// state.count++

// }, 1000)

state.count++

},

addN(state, step) {

state.count += step

},

sub(state) {

state.count--

},

subN(state, step) {

state.count -= step

}

},

actions: {

addAsync(context) {

setTimeout(() => {

// 在 actions 中，不能直接修改 state 中的数据；

// 必须通过 context.commit() 触发某个 mutation 才行

context.commit('add')

}, 1000)

},

addNAsync(context, step) {

setTimeout(() => {

context.commit('addN', step)

}, 1000)

},

})

commit函数用于触发Mutations，而dispatch函数用于触发Action，注意Action无法直接修改state域中的值，还是必须通过Mutations来间接的修改state域中的值。

Addition.vue

2：触发Action方法二

同样的可以使用mapActions数据结构来引入在store.js中注册过的Action和mapState、mapMutations同理。注意用mapMutations、mapActions注册过的方法可以直接根据函数名来调用。

Subtraction.vue

4）Getter

Getter用于对Store中的数据进行加工处理并形成新的数据，类似于Vue中的计算属性，Store中的数据发生变化，Getter中的数据也发生变化，存在一个响应关系。

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

// 定义唯一的state域变量

state: {

count: 0

},

mutations: {

···

},

actions: {

···

},

// getter方法模拟显示当前最新的值

getters: {

showNum(state) {

return '当前最新的数量是【' + state.count + '】'

}

}

})

1：使用getters的两种方法

5. Vuex综合案例

详见于 vuex_demo2，里面有我非常详细的注释。注意打开新项目时应当删除module_nodes和package-lock.json两个文件夹，并输入指令npm i(即install)和npm run serve来启动服务。