Vuex-状态管理模式

Posted 小蜗爬爬

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex-状态管理模式相关的知识,希望对你有一定的参考价值。

作用:集中存储和管理应用的所有组件状态。通俗的说,就是集中存储、计算、处理数据

一个项目只有一个数据源,所用的组件共用一个仓库(Store

使用场景:组件间存在公用依赖的数据

Store仓库里,有以下几种属性:

state是用来存放数据,远程加载数据,加载的是一个静态的数据;

getters是初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据)

//定义getters 不推荐使用箭头函数
const getters = {
   count:function(state){
       return state.count +=100
   }
};
//使用mapGetters
<script>
//引入 
import {mapState,mapMutations,mapGetters} from vuex 
computed:{    
      ...mapState([ 
        " count"
         ]),
 
      ...mapGetters([
          "count"
          ])
 },    
</script>

 

 

mutation:里面装着一些改变数据方法的集合,把处理数据逻辑方法全部放在mutations里面 

注:Vuexstore数据改变的唯一方法就是mutation

mutation结构:{type:handler()}, 事件类型(type)和回调函数(handler)

调用type的时候需要用到store.commit方法。

载荷(payload):简单的理解就是往handler(state)中传参

//定义mutation
import Vuex from ‘vuex‘ const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state, n) { // type:increment,handler第一个参数是state; state.count += n } } }) //使用mutation store.commit(‘increment‘) //调用type,触发handler(state) 或者 import { mapMutations } from ‘vuex‘ export default { methods: { ...mapMutations([ ‘increment‘ // 映射 this.increment() 为 this.$store.commit(‘increment‘) ]),

 

Action 提交的是 mutation,而不是直接变更状态. Action 是异步的,mutation是同步的。

vuex学习---简介的案例:这里是加10 减1

在store.js 中 代码为:

import Vue from ‘vue‘
import Vuex from ‘vuex‘
 
//使用vuex模块
Vue.use(Vuex);
 
//声明静态常量为4
const state = {
  count : 4
};
 
const mutations = {
  add(state,n){
    state.count +=n.a;
  },
  sub(state){
    state.count--;
  }
};
 
const actions = {
  //2种书写方式
  addplus(context){ //可以理解为代表了整个的context
    context.commit(‘add‘,{a:10}) 
  },
  subplus({commit}){
    commit(‘sub‘);
  }
};
 
//导出一个模块
export default new Vuex.Store({
  state,
  mutations,
  actions
})

 

 

2.在App.vue中 代码如下:

<template>
 <div id="app">
   <div id="appaaa">
    <h1>这是vuex的示例</h1>
 
    <p>组件内部count{{count}}</p>
    <p>
      <button @click = "addplus">+</button>
      <button @click = "subplus">-</button>
    </p>
    </p>
 
  </div>
 </div>
</template>
 
<script>
//引入mapGetters 
import {mapState,mapMutations,mapGetters,mapActions} from vuex
export default {
 name:app,
 data(){
   return {
      
   }
 },
 computed:{
   ...mapState([
     "count"
     ]),
 },
 methods:{
   ...mapActions([
      "addplus",
      "subplus"
     ])
 }
 
}
</script>
 
<style>
 
</style>

 

mapXXXX

核心:map其实就是一个在store文件中的映射而已,就是不用让你要调用一个值需要敲这么多代码

如果有以下的定义方式:

methods: {
  ...mapActions([
    ‘foo‘,
    ‘bar‘
  ])
}

则相当于

methods: {
  foo(...args) {
    return this.$store.dispatch.apply(this.$store, [‘foo‘].concat(args))
  }
  bar(...args) {
    return this.$store.dispatch.apply(this.$store, [‘bar‘].concat(args))
  }
}

官网的vuex的例子中,有这种写法:

methods: {
  ...mapActions([
    ‘some/nested/module/foo‘,
    ‘some/nested/module/bar‘
  ])
}

则相当与

methods: {
  foo(val){
    return this.$store.dispatch(‘some/nested/module/foo‘, val))
  }
   //bar 省略....
  })
}

 

vuex实例:  http://www.jb51.net/article/110212.htm

 

以上是关于Vuex-状态管理模式的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段13——Vue的状态大管家

手把手教你学vue-4(vuex)

vue状态管理(vuex)

vuex是什么,以及用vuex的好处,和单界面状态管理

一文让你看懂什么是vuex

VUEX 总结