VueX详解

一、什么是VueX

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

二、VueX在什么情况下使用

Vuex 可以帮助我们管理公共状态，并附带了更多的概念和框架。如果开发小型单页应用，使用 Vuex 可能是繁琐冗余的。如果开发的应用够简单，尽量不要使用 Vuex。但是，如果需要构建一个中大型单页应用，就会很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

三、状态管理

3.1 单页面状态管理

3.2多页面状态管理

四、Vuex的安装配置

1、npm 或 yarn安装

npm install vuex@next --save
yarn add vuex@next --save

2、如果在脚手架 创建项目时勾选vuex的选项系统会自动创建

五、Vuex核心概念

Vuex中一共有五个状态 State Getter Mutation Action Module

5.1 state

公共数据源，所有公共的数据放到store的state进行储存，类似与data

在state中定义数据，可以在任何组件中进行调用

方法一：.在标签中直接使用

<p>{{ $store.state.name }}</p>
<p>{{ $store.state.age }}</p>
<p>{{ $store.state.count }}</p>
1
2
3

方法二：

this.$store.state.全局数据名称
1

方法三：.从vuex中按需导入mapstate函数

import { mapState } from "vuex";
1

5.2 Mutation

更改 store 中的状态是提交 mutation。每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一

方法一：

使用commit触发Mutation操作

// index.vue
<button @click="$store.commit('addcount',10)">+</button>
<button @click="$store.commit('reduce')">-</button>
1
2
3

// store/index.js
import { createStore } from 'vuex'
state:{
    name:"张三",
    age:12,
    count:0
},
getters:{},
mutations:{
    addCount(state, num){
        state.count = + state.count + num
    },
    reduce(state){
        state.count--
    }
},
actions:{},
modules:{}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方法二：

使用辅助函数进行操作

// index.vue
methods:{
    ...mapMutations(['addCount', 'reduse']),
    btn(){
        this.addCount(5)
    },
    btn1(){
        this.reduce()
    }
}
1
2
3
4
5
6
7
8
9
10

5.3 Action 异步操作

Action和Mutation相似，Mutation 不能进行异步操作，Action可以进行异步操作

将减法改为异步操作

// store/index.js
actions:{
    asyncReduce(context){
        setTimeout(() => {
            context.commit('reduce')
        }, 500)
    }
}
1
2
3
4
5
6
7
8

在组件中使用

方法一：

使用dispatch触发Action函数

this.$store.dispatch("asyncReduce")
1

方法二：

使用辅助函数

// index.vue
...mapActions(['asyncReduce']),
btn1(){
    // this.reduce()
    this.asyncReduce()
}

1
2
3
4
5
6
7

5.4 Getter

类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

操作同上

5.5 Modules

开发大型项目时，数据量太大，Vuex就会显得很臃肿。为解决以上问题，Vuex 将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter

// store/index.js
modules:{
    userModels:{
        namespaced:true,
        state:{
            name:"李四",
            age:18,
            count:0
        },
        mutations:{},
        getters:{},
        actions:{},
		modules:{}
    },
    outerModels:{
        state:{},
        mutations:{},
        getters:{},
        actions:{},
		modules:{}     
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

// index.vue
btn(){
    // this.addCount(5)
    console.log(this.$store.state.userModels.name)
}

1
2
3
4
5
6

还可以将模块划分出来

目录结构

// store/index.js
import { createStore } from 'vuex'
import getters from "@/store/getters";
import mutations from "@/store/mutations";
import actions from "@/store/actions";
import user from './usermodule/user';

const article = {};
const cart = {};
const goods = {};

const state ={}

export default createStore({
    state, getters, mutations, actions,
    modules: {user, article, cart, goods}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

总结

1. Vuex主要用于管理Vue组件中共享的数据。

2. Vuex中有state、mutation、action、getter等核心概念。

3. 获取state可以通过this.$store.state.xx或者是通过定义mapState来获取。

4. 修改state中的变量需要通过mutation函数实现，而mutation的触发由两种方式，一种是通过this.$store.commit()函数，另外一种就是通过mapMutations来实现。

5. mutation只能用于修改数据，而Actions可以实现异步操作。

6. 通过Actions的异步操作+mutation的修改数据，可以实现异步修改数据。调用Actions有两种方式，第一种是通过this.$store.dispatch来调用，另外一种方式是通过mapActions来调用。

7. Getters函数用于对Store中数据进行加工，不会修改原本Store中的数据；Getters中的数据会受Store中数据进行影响。