Vuex-状态管理模式

Posted 2020-10-26 小蜗爬爬

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

一个项目只有一个数据源，所用的组件共用一个仓库（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里面 

注：Vuex中store数据改变的唯一方法就是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