知识点回顾（一）—— vuex

百年孤独html
521 阅读3分钟

日常更文~~

vuex概念

实现多组件状态管理，多个组件之间需要数据共享。

Vuex 和单纯的全局对象有以下两点不同：

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

vuex的五大核心

  1. State：负责状态管理，类似于vue中的data，用于初始化数据；
  2. Mutations：用于修改state中的数据，通过commit触发；
  3. Action：可用来处理异步，用过dispatch触发，不能直接修改state；需要先在组件中通过dispatch触发action，然后再action函数内部commit触发mutation，通过mutation修改state状态值；
  4. Getters：vuex中的计算属性，相当于vue中的computed，依赖于state的状态值，状态值一旦改变，getter就会重新计算，也就是说，当一个数据依赖于另一个数据发生变化的时候，就要使用getter；
  5. Modules：模块化管理，把store分割成不同的模块

Mutations

mutations方法都有默认的形参：([state],[payload] )

  • state:当前Vuex对象中的state;
  • payload:该方法被调用时候传递参数使用的。
修改state中的数据

例子：修改state中的数据

import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex);

const  store = new Vuex.store({
 state:{
   name:'weirui'
 },
 mutations:{
   edit(state){
     state.name = 'wei';
   }
 }
})

export default = store;

在组件中我们调用this.$store.commit('edit');就可以修改name的值。

在有些时候我们需要携带参数给mutations方法使用：

单个参数：

this.$store.commit('edit','wei');

多个参数：

this.$store.commit('edit',{name:'wei',sex:'女'});
// 方式二

this.$store.commit({
    type:'edit',
    payload:{
        name:'wei',
        sex:'女'
    }
})

在mutations中接收参数的时候：

edit(state,payload) {
  console.log(payload); // 'wei'或者{name:'wei',sex:'女'}
}
增删state中的成员
  • Vue.set 为某个对象设置成员的值，若不存在则新增

例如对state对象中添加一个age成员：

Vue.set(state,"age",24);
  • Vue.delete 删除成员

删除刚刚添加的age成员

Vue.delete(state,'age');

Actions

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

  • context: 上下文(相当于箭头函数中的this)对象
  • payload: 挂载参数

例如：我们在两秒中后执行刚刚的edit方法

由于setTimeout属于异步操作，我们需要使用actions来操作：

actions:{
    aEdit(context,payload){
        setTimeout(()=>{
            context.commit('edit',payload)
        },2000)
    }
}

在组件中使用：this.$store.dispatch('aEdit',{age:24});

因为是异步操作，我们可以封装一个promise对象：

 aEdit(context,payload){
      return new Promise((resolve,reject)=>{
          setTimeout(()=>{
             context.commit('edit',payload)
             resolve()
          },2000)
      })
 }

Getters

对state中的成员加工后传递给外界，同样也有两个默认参数：

state：当前vuex对象中的状态对象； getters：当前getters对象，用于将getters下的其他getter拿来用；

getters:{
    nameInfo(state){
        return "姓名:" + state.name;
    },
    fullInfo(state,getters){
        return getters.nameInfo + '年龄:' + state.age;
    }  
}

外部组件中使用：this.$store.getters.fullInfo;

modules

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

modules:{
    a:{
        state:{},
        getters:{},
        ....
    }
}

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

this.$store.state.a;
avatar
文章
阅读
粉丝