Vue-6 Vuex

Vue-6 Vuex(state, getters, mutations, actions, modules)

博主wx: -GuanEr-,加博主进前端交流群

在项目研发过程中,组件和组件之间的结构关系非常复杂,到处存在数据交互。 props$emit,路由传参是远远不足以支撑复杂的数据交互。

Vue 单独提供了 vuex 来做项目的状态管理,vuex 提供了公共数据的存储和操作方式,让组件之间的数据交互变得更简洁。

vuex 的核心理念就是存储一些供各个组件使用的数据,无论组件的嵌套结构如何,都能访问 vuex 中的数据。任何一个组件对其中的数据做了修改,在其他组件中的渲染会立即响应。

一、Vuex的安装和基本配置

vue-router 一样,要在项目中使用 vuex,需要先下载依赖包。

npm i vuex --save

安装成功之后在 src 文件夹中创建项目目录:

src
    └── App.vue
    └── main.js
    └── assets
    └── components
           // ...
    └── router
           // ...
    └── store // 状态管理库的目录
           index.js // 状态管理库的根配置文件
            

vuex 的基本配置:

// store>index.js
import Vue from 'vue'
import Vuex from 'vuex' // 引入 vuex

Vue.use(Vuex); 

// 创建一个状态管理库实例并且导出,以备使用
export default new Vuex.Store({
    // code
});

配置好了之后要将这个 Vuex.Store 实例对象传入根组件的实例化中,整个项目才能使用 vuex

// main.js
import Vue from 'vue'
import App from './App'

// 导入 store (省略)
import store from './vuex'

Vue.comfig.productionTip = false;

new Vue({
    el: '#app',
    // 将 store 传入根组件实例化的参数中
    store,
    components: { App },
    template: '<App/>'
});

vuexStore 类提供了五个配置,包含了可能出现的各种操作。

二、state

state 中存放的是 store 中所有的数据列表。

任何组件无论嵌套关系多复杂,都可以访问 state 中的数据。

// store>index.js 中的 state
state: {
   num: 100,
   bol: true
}

在任意组件中获取:

<!-- Any.vue -->
<template>
   <div class="any">
       <h2>num: {{ num }}</h2>
       <h2>bol: {{ bol }}</h2>
   </div>
</template>
<script>
   export default {
       name: 'Any',
       computed: {
          // 建议将对于 store 中的数据的获取或者操作写在计算属性中,这样当 store 中的数据变化时,也能及时响应
          num() {
              return this.$store.state.num;
          },
          bol() {
              return this.$store.state.bol;
          }
       }
   }
</script>

在其他任何组件中,对 state 中的数据做操作时,当前组件也会随之响应。

store 的好处之一就是无论组件和组件之间的嵌套结构是怎样的,都能共同访问 store 中的数据。

但是如果只是想访问 state 中的数据,且访问了很多个数据,那么为每一个数据单独的写一个计算属性,就显得很不理智。

vuex 提供 mapState 来批量的访问 state 中的数据

<!-- Any.vue -->
<script>
   import { mapState } from 'vuex';
   export default {
       computed: {
           ...mapState([
              'num',
              'bol'
           ]);
       }
   }
</script>

调用方式不变。

三、getters

给一个示例,state 中有一个数组,数组中有各种类型的数据,有两个组件(A和B),都只想要这个数组中的 number 列表。

state: {
   arr: [1, 4, 5, 'hello', true, 'world', 98]
}

我们可以在 A 和 B 的计算属性中先拿到 state 中的 arr,对其做处理,返回数字列表:

<!-- A.vue -->
<script>
   export default {
       name: 'A',
       computed: {
          numArr() {
              const arr = this.$store.state.arr;
              return arr.filter(function(item) {
                   if(typeof item == 'number') return item;
              });
          }
       }
   }
</script>

如果 B 组件的需求和 A 组件一样,那么 numArr 中的这段代码,在 B 组件中,又要重新写一遍。

这样就形成了代码冗余。

所以 vuex 提供了 getters,来根据代码需求过滤 state 中的数据,向外抛出过滤之后的数据。

// store>index.js 中导出的实例 
export default new Vux.Store({
    state: {
       arr: [1, 4, 5, 'hello', true, 'world', 98]
    },
    getters: {
        // getters 中的函数接收的第一个参数就是 state,可以通过它直接访问数据列表
        numArr: state => {
            const arr = state.arr;
            return arr.filter(function(item) {
                if(typeof item == 'number') return item;
            });
        }
    }
});

现在 A 、B 组件想要访问 state 中的 arr 中的数字列表,可以直接访问 getters

<!-- A.vue -->
<script>
    export default {
        name: 'A',
        computed: {
            // 求 state 中的 arr 中的所有数字的和
            numSum() {
                const arr = this.$store.getters.numArr;
                // 求和代码
            }
        }
    }
</script>
<!-- B.vue -->
<script>
    export default {
        name: 'B',
        computed: {
            // 求 state 中的 arr 中的所有数字的最大值和最小值
            numSum() {
                const arr = this.$store.getters.numArr;
                const min = Math.min(...arr);
                const max = Math.max(...arr);
            }
        }
    }
</script>

可以认为 gettersstore 的计算属性,当 state 中的数据变化的时候,getters 返回的数据也会随之变化,且只有当它的依赖值发生了变化之后才会变化。

如果需求再变化:A 组件希望拿到 arr 中所有的数字,B 组件希望拿到 arr 中所有的字符串。那可能需要向 getters 中传递想要的数据类型,实现按需获取数据的效果。

所以我们也可以以函数的形式访问 getters,并且向其传参。

// store 中的 getters
getters: {
    getArrByType(state) {
        return function(type) {
            const arr = state.arr;
            return arr.filter(function(item) {
                if(typeof item == type) return item;
            });
        }
    }
    /* 
    关于以函数的形式访问getters官网给出的是箭头函数简写形式(两种意义一样):
    getArrByType: (state) => (type) => {
        const arr = state.arr;
        return arr.filter(function(item) {
            if(typeof item == type) return item;
        });
    }
    */
}

访问:

// 任意组件的 computed
computed: {
    getData() {
        const numArr = this.$store.getters.getArrByType('number');
        const strArr = this.$store.getters.getArrByType('string');
    }
}

同样的,如果 getters 只是获取而不传参,也不用为其写很多个计算属性。

vuex 提供 mapGetters 来批量获取 getters

// 任意组件的 js
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'getData1',
      'getData2',
      // ...
    ])
  }
}

调用时直接将这些数组中的参数作为变量名去使用即可。
如果觉得 store 中对于 getters 的命名太冗长,也可以在某个组件中为其单独命名

// 在当前组件中,gd 就代表 getArrByType
mapGetters({
    gd: 'getArrByType'
})
四、mutations

根据代码的需求,有时候我们可能也需要对 vuex 中的数据做一些更改。

vuex 规定,只能在其提供的 mutations 中修改 state 中的数据,否则严格模式下会直接报错。

// store>index.js 中 store 实例的导出
export default new Vuex.Store({
    state: {
        arr: [1,4,6]
    },
    mutations: {
        // 向 arr 中添加数据
        arrPush(state) {
            // mutations 中接收的函数的第一个参数也是 state
            state.arr.push(Math.floor(Math.random() * 100));
        }
    }
});

在任意组件中调用 mutations 中的函数需要使用到 storecommit

// 任意组件的 created
created() {
    // 调用 store 的 mutations 中的 arrPush
    this.$store.commit('arrPush');
}

也可以向 mutations 中的函数传参

mutations: {
    arrPush(state, data) {
        // data 就是在调用 mutations 时传递过来的参数
        state.arr.push(data);
    }
}

调用:

// 任意组件的 created
created() {
    this.$store.commit('arrPush', Math.random());
}

vuex 建议: 向 mutations中传递的参数尽量是一个对象,这样便于传输大量数据。

需要注意的是:mutations 中不能存在异步操作。

我们也可以使用 mapMutations 将组件中的 methods 映射成 mutations 中的函数。

methods: {
    ...mapMutations([
       // 在当前组件中,ap 就代表 arrPush  
       ap: 'arrPush'
    ])
  }
五、actions

vuex 不允许 mutations 中出现异步操作,那么有个异步操作刚好需要对 state 做改变,就需要写在 vuex 提供的 actions 中。

所以应该是在 actions 中写异步代码,在异步的某个过程中,如果需要对 state 做操作,就调用 mutations 中的函数。

// store>index.js 中的导出
export default new Vuex.Store({
    state: '500 miles',
    mutations: {
        setStr(state, newStr) {
            state.str = newStr;
        }
    },
    actions: {
        _setStr(context) {
            // Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
            setTimeout(() => {
                context.commit('setStr', '500 miles away from home');
            });
        }
    }
});

调用:

// 任意组件的 created
created() {
    this.$store.dispatch('setStr');
}

actions 也可以接收 dispatch 时被传递的数据:

actions: {
    // 可以通过解构的方式从 context 中解构到 commit
    _setStr({commit}, newStr) {        
        setTimeout(() => {
            // newStr 就是调用 actions 时传递的参数
            context.commit('setStr', newStr);
        });
    }  
}

调用:

// 任意组件的 created
created() {
    this.$store.dispatch('setStr', '500 miles away from home');
}
六、modules

如果项目对于 state 的依赖很强,使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

将不同的需求的状态单独的声明成一个变量,然后将其导入到根对象的 modules 中,就能生效。

// store>index.js
import Vue from 'vue'
import Vuex from 'vuex' 

Vue.use(Vuex); 

const moduleA = {
    state: { 
       msg: 'data of a' 
    },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}

const moduleB = {
    state: { 
        msg: 'data of b' 
    },
    mutations: { ... },
    actions: { ... }
}

const store = new Vuex.Store({
    state: {
        msg: 'data of root'
    }
    modules: {
        a: moduleA,
        b: moduleB
    }
});

// 创建一个状态管理库实例并且导出,以备使用
export default store

对于不同模块的 state 中的数据的访问:

// 任意组件的 created
created() {
    const data1 = this.$store.state.msg;
    const data2 = this.$store.state.a.msg;
    const data3 = this.$store.state.b.msg;
}

除了state之外,getters、mutations、actions的访问方式不变。

如果要在子模块的 getters 中访问根 state 中的数据:

// 任意子模块的 getters
getters: {
    getData(state, getters, rootState) {
        // state: 当前模块的 state
        // rootState: 根模块的 state
    }
}

如果要在子模块的 actions 中访问:

// 子模块的actions
actions: {
    fn(context) {
        // context.state: 当前模块的 state
        // context.rootState: 根模块的 state
    }
}

扫码拉你进入前端技术交流群

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200901085336629.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zsb3dHdWFuRXI=,size_20,color_FFFFFF,t_70#pic_center)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

锋利的二丫

如果对您有帮助,请博主喝杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值