简述Vuex(重要)

这里引入Vuex的概念，vuex可以解决什么问题呢？vuex是必须要使用的吗？

这里画个图，方便各位理解

可以看到组件1，2之间的通信还是比较容易的，但如果组件3，4去通信还容易吗？事实上vuex就是应对这种情况而产生的，在这种场景(组件多)非常适用。但一定要用vuex吗？其实不一定。倘若你的页面和组件及其简单，适用vue的父子组件之间的相互通信就足够应付，使用vuex反而会让你的程序变得冗余且庞大。

接下来，我将给你讲解vuex里的核心组成"getter","State"等。并配合实际案例，让你对vuex有更深的体会。

先从基本的文档看起[vuex文档](开始 | Vuex (vuejs.org))

1.Vuex

夫传子：props

子传夫：自定义事件

集中式管理组件共享数据，可以解决不同组件数据共享问题。

状态管理，把许多组件公用的变量存储在一个对象里面，便于管理。

单页面状态管理

• View:视图层，针对State的变化，显示不同信息。
• State:状态，也就是显示的数据。
• Action:行为，用户行为，比如点击，输入

核心组成：

1. State:存放状态
2. Mutations：数据修改（异步）
3. Actions：异步操作

vue组件可以直接使用state,组件调用Action，利用vuex完成非关系型组件数据共享

state

含义

存放公共状态

定义

  state: {
    count: 0,
    age: 20
  },
1
2
3
4

使用

计算属性

  computed: {
    count() {
      return this.$store.state.count;
    },
  },
1
2
3
4
5

在页面中可以使用插值语法使用：{{count}}

辅助函数

1. 先导入

1. 先引入import { mpaState } from "vuex"; 
1

2. 在计算属性中注册

 ...mapState(["count", "age"]),
1

3. 页面使用

{{count}}
1

Mutations

含义

修改state中的状态(同步)，存放修改状态的函数

定义

  mutations: {
    //payload：载荷，向函数添加参数
    addCount(state, payload) {
      state.count += payload
    }
  },
1
2
3
4
5
6

使用

原始事件

  methods: {
    handAdd() {
      this.$store.commit("addCount", 10);
    },
  }
1
2
3
4
5

@click="handAdd"
1

辅助函数

先引入

import { mapMutations } from "vuex";
1

在methods中

  methods: {
    ...mapMutations(["addCount"]),
  },
1
2
3

@click="addCount(100)"
1

Actions

含义

执行异步操作

定义

  actions: {
    //异步操作
    /***
     * 第一个参数：上下文context, ==this.$store
     * 第二个参数：params，可以接受传来的参数
     */
    getCount(context, params) {
      setTimeout(() => {
        context.commit("addCount", params)
      }, 1000)
    }
  },
    mutations: {
    //payload：载荷，向函数添加参数
    addCount(state, payload) {
      state.count += payload
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用

原始事件

在methods中

add() {   
  this.$store.dispatch("getCount", 30);
},
1
2
3

@click="add"
1

辅助函数

先引入

import { mapActions } from "vuex";
1

在methods中

...mapActions(["getCount", 30]),
1

 @click="getCount(50)"
1

Getter

含义

依赖state中的状态，派生数据，看作vuex中的计算属性

定义

  getters: {
    filsteList(state) {
      return state.list.filter(item => item > 3)
    }
  },
在数组中找出大于3的数并返回
1
2
3
4
5
6

使用

原始

插值语法

{{ this.$store.getters.filsteList }}
1

辅助函数

先引入

import { mapGetters } from "vuex";
1

在computed中

...mapGetters(["filsteList"]),
1

{{ filsteList }}
1

module

含义

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。

定义

  modules: {
    user: {
      namespaced: true,
      state: {
        token: 'key'
      },
      mutations: {
        updateToken(state) {
          state.token = "keys"
        }
      },
      actions: {},
      getters: {}
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用

原始

直接使用

$store.state.user.token
1

辅助函数

1. 先引入

import { mapState } from "vuex";
1

2. 在计算属性中使用，参数名为子模块名

  computed: {
    ...mapState(["user"]),
  },
1
2
3

对象["属性"]
{{ user["token"] }}
1
2

便捷方法

1. 将模块中的state放到全局的getter中

  getters: {
    getToken(state) {
      return state.user.token
    }
  },

1
2
3
4
5
6

注意：

全局getter，拿到user的token需要加.user

2. 在user.vue中引入辅助函数

import {  mapGetters,} from "vuex";
1

3.在计算属性中使用

 computed: {
    ...mapGetters(["getToken"]),
  },
1
2
3

{{getToken}}
1

命名空间

含义

数据是有空间的，其他空间不可以随意访问，默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

定义

1. 添加namespaced:true

modules: {
    user: {
+      namespaced: true,
      state: {
        token: 'key'
      },
      mutations: {
        updateToken(state) {
          state.token = "keys"
        }
      },
      actions: {},
      getters: {}
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用

1. 先引入

import { createNamespacedHelpers } from "vuex";
1

2. 初始化

const { mapMutations } = createNamespacedHelpers("user");
1

3. 使用

 methods: {
    ...mapMutations(["updateToken"]),
  },
1
2
3

@click="updateToken"
1