Vuex状态管理模式

多个组件依赖或批改同一个状态 – 共享
应用Vue.observable能够实现一个轻量型的状态治理

根底
Modules

1 根底

根本构造与应用
State
Mutations
Actions
Gtters
map

1.1 根本构造与应用

结构图

装置Vuex

npm install vuex --save

store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    mutations: {
        increment() {
            this.state.count++
        },
        decrement() {
            this.state.count--
        }
    },
    state: {
        count: 0
    }
})

组件一

<template>
  <div>
    <button @click="add">+</button>
    <span>{{ num }}</span>
  </div>
</template>

<script>
import { store } from "../store";
export default {
  store: store,
  computed: {
    num() {
      return store.state.count;
    },
  },
  methods: {
    add() {
      store.commit("increment");
    },
  },
};
</script>

<style>
</style>

//main.js
import { store } from './store'
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
//组件二
dec() {
  this.$store.commit("decrement");
},

两个组件能够操作同一个值

在store文件中引入Vue以及Vuex
Vue.use(Vuex)，new Vuex.Store({})
在组件中引入store并注册，能够间接应用store
在根实例中引入并注册store，子组件能够通过vm.$store来拜访与批改数据

1.1 State

存储状态
每个数据作为对象属性供各个组件拜访
通常会应用计算属性让状态能在组件中应用，当状态变动时会从新计算

1.2 Mutations

更改Vuex的store中状态的惟一办法是提交mutation

mutation中的回调函数接管state作为第一个参数

mutations: {
  increment (state) {
      state.count++
  }
}

通过store.commit来申明应用哪个回调解决数据，能够传递额定的参数

mutations:{
  increment(state,n){
      state.count +=n
  }
}
//提交
store.commit('increment',10)

参数为一个对象

mutations: {
increment (state, payload) {
  state.count += payload.amount
}
}
//提交
store.commit('increment',{amount:10})

对象模式的提交

//解决的回调与参数时对象的雷同
mutations: {
increment (state, payload) {
  state.count += payload.amount
}
}
//整体提交一个对象
store.commit({type:'increment',amount:10})

如果须要增加状态，能够应用Vue.set(obj,key,val)，或者应用扩大符解构赋值

//提交增加状态
addOne() {
store.commit("addState", { name: "张三" });
},
//增加状态的回调
addState(state, obj) {
  const keys = Object.keys(obj)
  Vue.set(state, keys[0], obj[keys[0]])
}

Mutation必须是同步函数，异步操作时不能断定是哪个操作在扭转状态

1.3 Actions

相似于mutation，不同如下：

提交的是mutation，不间接更改状态
能够蕴含异步操作

store

actions: {
    getData(context, param) {
        const oneData = [param, '数据1', '数据2']
        context.commit('GETDATA', oneData)
    }
},
mutations: {
    GETDATA(state, data) {
        Vue.set(state, 'myData', data)
    },
},
state: {
    myData: [],
}

组件

<template>
  <div>
    <button @click="getItem">申请数据</button><br />
    <span v-for="(item, index) in myData" :key="index">{{ item }}</span>
  </div>
</template>

<script>
export default {
  computed: {
    myData() {
      return this.$store.state.myData;
    },
  },
  methods: {
    getItem() {
      this.$store.dispatch("getData", "申请");
    },
  },
};
</script>

Action的回调函数接管一个与store实例具备雷同属性和办法的context对象作为第一个参数
context !== this，context并不是store实例自身，mutation的state参数则是store实例上的实在的属性
在action中次要应用context的commit办法去提交mutation，所以能够应用解构赋值的形式简化参数，能够读state中的数据
```
actions:{
    getData({commit},param){
        commit('GETDATA',parm)
    }
}
```

Action通过store.dispatch进行散发，如果回调函数返回一个Promise，能够在散发的前面进行链式操作或者在其余action中进行链式操作

actions:{
  actionA({commit}){
    return new Promise(async (resolve,reject)=>{
        await delay();
        commit('mutation1');
        resolve()
    })
  },
  actionB({dispatch,commit}){
      return dispatch('actionA').then(()=>{
          commit('mutation2')
      })
  }
}

Action中能够异步申请与操作，在不同的异步阶段提交mutation，能够利用async/await组合action

1.4 Getters

相似与计算属性
在应用state中数据的同时，可能还须要由state派生出的一些状态，这时能够在组件内应用计算属性对state进行操作
然而当多个组件须要同样的派生状态，局部组件须要原state时，在每个组件内都应用计算属性显然很麻烦
getter能够将state中的数据计算后供组件拜访

//store
state: {
    user: [
        { name: '张三', age: 18 },
        { name: '李四', age: 15 },
        { name: '王二', age: 21 },
        { name: '麻子', age: 17 },
    ]
},
getters: {
    adult({ user }) {
        return user.filter(item => {
            return item.age >= 18
        })
    }
}
//组件内
computed: {
  adultUser() {
    return this.$store.getters.adult;
  },
},

getters中的回调第一个参数state，第二个参数getters
能够让getter返回一个函数，这样能够向getter中传递数据，配合数组的find办法，能够对store中的数据进行查问

1.5 map

辅助函数

mapState
mapGetters
mapMutations
mapActions

1.5.1 mapState

当一个组件须要多个状态时，频繁应用计算属性让代码很臃肿，应用辅助函数能够简化操作

//store
state: {
  a: 1,
  b: 2
},
//组件
<template>
  <div>
    <span>{{ a }}{{ b }}</span>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    //数组参数
    ...mapState(["a", "b"]),
  },
};
</script>

引入mapState函数，参数为数组模式，然而不能改名，容易与data中的数据发生冲突
mapState函数返回一个对象，应用开展运算符，能够一一混入到计算属性中

//对象参数
computed: {
  ...mapState({
    a: "a",
    bar: "b",
  }),
},

1.5.2 mapGetters

与mapState函数相似

在组件中引入mapGetters函数
两种传参形式
应用扩大运算符将getter混入computed对象中
相当于计算属性的后果在组件中应用

1.5.3 mapMutations

将组将中的methods映射为store.commit调用

//store
state: {
    count: 0
},
mutations: {
    increment(state, param) {
        state.count += param
    }
}
//组件
<template>
  <div>
    <button @click="add(10)">加10</button>
    <span>{{ num }}</span>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      num: "count",
    }),
  },
  methods: {
    ...mapMutations({
      add: "increment",
    }),
  },
};
</script>

在组件中引入mapMutations函数
两种传递参数的形式
扩大运算符将返回的对象混入到methods中
相当于在methods中注册的办法，调用时能够传递参数，作为回调函数的第二个参数

1.5.4 mapActions

与mapMutations相似
最终能够在组件中调用，能够应用this灵便的调用

2 Module

当状态较多时，store对象就会变得越来越臃肿
Vuex反对将store对象宰割成模块。每个模块领有本人的state、mutation、action、getter甚至是嵌套子模块

2.1 模块化的导入和导出

目录构造示例

└── store
    ├── index.js          # 咱们组装模块并导出 store 的中央
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── topics.js       # 购物车模块
        └── comments.js   # 产品模块

//模块1
export const Topics = {
    state: {
        backTopic: '举荐',
        userTopic: '自定义'
    },
    mutations: {
        modify(state, param) {
            state.userTopic = param
        }
    }
}
//模块2有同名的mutation
...
//mutathions.js 有一个同名的办法
...
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import { Topics } from './modules/topics'
import { Comments } from './modules/comments'
import { mutations } from './mutations'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        root: '根状态'
    },
    mutations,
    modules: {
        Topics,
        Comments
    }
})

子模块引入在modules对象中，无需改名能够应用简写模式
这样能够分模块操作，根state中会依据引入的模块混入子state对象
如果在组件中间接提交mutation，同名的mutation会同时开始操作

在模块导出时增加namespaced:true，能够辨别不同模块的同名操作

export const Topics = {
  namespaced: true,
  state: {
      backTopic: '举荐',
      userTopic: '自定义'
  },
  mutations: {
      modify(state, param) {
          state.userTopic = param
      }
  }
}

模块中的action的context中能够接管到跟状态rootState
模块中的getter的参数：state getters rootState rootGetters

2.2 在组件中散发与提交

2.2.1 通过store间接拜访

//读取state
computed: {
  userTopics() {
    return this.$store.state.Topics.userTopic;
  },
}
//提交mutation
this.$store.commit("Topics/modify", "批改");

应用命名空间时，须要增加门路能力提交mutation，action亦是如此

2.2.1 应用辅助函数

computed: {
  ...mapState({
    a: (state) => state.Topics.userTopic,
  }),
},
methods: {
  ...mapMutations({
    modiT: "Topics/modify",
  }),
},

对某一个模块的屡次援用，能够进行简化

computed: {
  ...mapState("Topics", {
    a: "userTopic",
    b: "backTopic",
  }),
},
methods: {
  ...mapMutations("Topics", {
    modiT: "modify",
  }),
},

createNamespacedHelpers函数

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapMutations } = createNamespacedHelpers('Topics')

此时生成的辅助函数会有一个自定义的门路，能够像个别状况下应用

其余注意事项

在模块中注册全局action

将回调函数写成对象模式，增加属性root:true，回调写放在handler办法中

动静注册模块

创立store后应用registerModule函数

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
 // ...
})

关于vue.js:vueVuex状态管理模式

Vuex状态管理模式

1 根底

1.1 根本构造与应用

1.1 State

1.2 Mutations

1.3 Actions

1.4 Getters

1.5 map

1.5.1 mapState

1.5.2 mapGetters

1.5.3 mapMutations

1.5.4 mapActions

2 Module

2.1 模块化的导入和导出

2.2 在组件中散发与提交

2.2.1 通过store间接拜访

2.2.1 应用辅助函数

其余注意事项

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于vue.js:vueVuex状态管理模式

Vuex状态管理模式

1 根底

1.1 根本构造与应用

1.1 State

1.2 Mutations

1.3 Actions

1.4 Getters

1.5 map

1.5.1 mapState

1.5.2 mapGetters

1.5.3 mapMutations

1.5.4 mapActions

2 Module

2.1 模块化的导入和导出

2.2 在组件中散发与提交

2.2.1 通过store间接拜访

2.2.1 应用辅助函数

其余注意事项

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复