vuex状态管理使用总结

作者: SarahLee1122 | 来源:发表于2020-01-10 15:36 被阅读0次

Vuex——状态管理
vuex状态管理使用总结
Vue学习笔记（三）
Vuex 2.0
Vuex
vuex基础
vuex 原理解析
VueJs对比ReactJs
Vuex
Vuex 状态管理

测试实例
component/HelloWorld.vue

<template>
  <div class="hello">
    <p>我是计算后的值{{this.$store.getters.getCount}}</p>
    <p>count的值{{this.$store.state.count}}</p>
    <button @click="addFun()"> + </button>
    <button @click="reductionFun()"> - </button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    addFun(){
        //this.$store.commit("add");//直接在mutation执行add
        this.$store.dispatch("add");//dispatch先提交action,action再执行add
        //this.$store.commit("setCount",11)
        this.$store.dispatch("setCount",11);
    },
    reductionFun(){
        this.$store.commit("reduction");

    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

store/index.js

import Vue from "vue"
import Vuex from "vuex"
//使用vuex
Vue.use(Vuex);

//创建vuex实例
const store = new Vuex.Store({
  state:{
    count:1,
    map:null//地图
  },
  getters:{//.类似于vue的computed
    getmap:function(state){//上面的state
        return state.map;
    }
  },
  mutations:{//改变状态值
    setmap:function(state,map){
        state.map = map;
    },
    add:function(state){
      state.count=state.count+1;
    },
    reduction:function(state){
      state.count=state.count-1;
    }
  },
  actions:{//注册actions,类似于vue的method,ajax请求的数据如果多组件使用可以在这里写回调函数
    addFun:function(context){
      context.commit("add");
    },
    reductionFun:function (context) {
      context.commit("reduction");
    }
  }
});

export default store  //导出store

1、vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module
1.1、state
state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。
1.2、getter
getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。
1.3、mutation
更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
1.4、action
action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action，则需要执行store.dispatch
1.5、module
module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。
2、vuex的State特性是？
1）Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
2）、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
3)它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
3、vuex的Getter特性是？
1)getters 可以对State进行计算操作，它就是Store的计算属性
2)虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
3)如果一个状态只在一个组件内使用，是可以不用getters
4、vuex的Mutation特性是？
1)Action 类似于 mutation，不同在于：
2)Action 提交的是 mutation，而不是直接变更状态。
3)Action 可以包含任意异步操作
5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
1)如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
2)如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。
6、不用Vuex会带来什么问题？
1)可维护性会下降，你要想修改数据，你得维护三个地方
2)可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
3)增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。
但兄弟组件有大量通信的，建议一定要用，不管大项目和小项目，因为这样会省很多事
7.vuex的store有几个属性值？state,mutations,active,getters