vuex 理解

//1.state
//state:用来存放组件之间共享的数据。他跟组件的data选项类似,只不过data选项是用来存放组件的私有数据。

//2.getters
//getters:有时候,我们需要对state的数据进行筛选,过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据,
//那我们就必须到处重复写该计算属性函数;或者将其提取到一个公共的工具函数中,并将公共函数多处导入 - 两者都不太理想。
//如果把数据筛选完在传到计算属性里就不用那么麻烦了,getters就是干这个的,你可以把getters看成是store的计算属性。
//getters下的函数接收接收state作为第一个参数。那么,组件是如何获取经过getters过滤的数据呢? 过滤的数据会存放到$store.getters对象中。

//3.mutations
//mutations:前面讲到的都是如何获取state的数据,那如何把数据存储到state中呢?在 Vuex store 中,
//实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。  
//mutations下的函数接收state作为参数,接收一个叫做payload(载荷)的东东作为第二个参数,
//这个东东是用来记录开发者使用该函数的一些信息,比如说提交了什么,提交的东西是用来干什么的,包含多个字段,
//所以载荷一般是对象(其实这个东西跟git的commit很类似)还有一点需要注意:mutations方法必须是同步方法!

//4.actions
//actions:既然mutations只能处理同步函数,我大js全靠‘异步回调’吃饭,怎么能没有异步,于是actions出现了...  
//actions和mutations的区别
//(1).Actions 提交的是 mutations,而不是直接变更状态。也就是说,actions会通过mutations,让mutations帮他提交数据的变更。
//(2).Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下

//总结
//更改state的数据并显示在组件中,有几个步骤:
//1. 在mutations选项里,注册函数 函数里面装逻辑代码。
//2.在组件里,this.$store.commit('change',payload)  注意:提交的函数名要一一对应  
//3.触发函数,state就会相应更改 
//4.在组件的计算属性里 this.$store.state 获取你想要得到的数据
//5 action 是异步执行-调用 mutations.js 中的方法--  mutations是同步的


//各个类型的 API各司其职,mutation 只管存,你给我(dispatch)我就存;action只管中间处理,处理完我就给你,你怎么存我不管;
//Getter 我只管取,我不改的。 action放在了 methods 里面,说明我们应该把它当成函数来用(讲道理,钩子函数也应该可以的) 
//mutation是写在store里面的,这说明,它就是个半成品,中间量,我们不应该在外面去操作它。
//getter写在了 computed 里面,这说明虽然 getter我们写的是函数,但是我们应该把它当成计算属性来用。


// mapState, mapGetters, mapMutations, mapActions 
// 在组件中 只是映射对应的值,做简写而已,比如 在 getters.js 中 通过 add方法获取 count 的值, 原始方法 :this.$store.getters.add,
// mapGetters 简写后 ...mapGetters(['add']), 直接在组件中使用 add 或者 this.add 就可以得到 count的值
// 在比如 在state 中获取 count值, 原始写法 this.$store.state.count 获取,使用  mapState后写法:...mapState(['count']) , 直接就可以使用 count 获取值
// mapState、mapGetters 放在 computed 组件计算属性当中


// mapActions、mapMutations 放在 methods 中
// mapActions 做异步处理的, mapMutations 做同步状态处理,看情况使用即可

代码:

<template>
  <div class="hello">
      <img src='../components/public/img/logo.png'/>
      <h1>路由二 vuex练习</h1>
      <button @click='back'>返回</button>
      <button @click='add'>+1</button>
      <button @click='minus'>-1</button>
      <input type="text" v-model="count"/>
      <input type="text" v-model="child"/>
      <span>{{ countAnother }}</span>
      <Test v-bind:data='test'></Test>
  </div>
</template>
<script>
import {mapActions, mapState, mapMutations, mapGetters} from 'vuex'
import './index.css';
import Test from './test.vue';
const Hellos  = {
    name: 'hellos',
    components:{ //组件调用
        Test
    },
  data () {
    return {
      msg: '<h1>v-html指令输入html内容</h1>',
      class1: false,
      child:''
    }
  },
  computed:{
      ...mapState(['count']),
      ...mapGetters(['add1']),
      countAnother: function () {  // 获取state
        return this.$store.state.count;
    }
  },
  methods:{
      add(){
          console.log(this);
//        this.ADD(this.$store.state);
        this.$store.dispatch(this.add);
      },
      minus(){
          this.$store.dispatch("minus");
      },
      back: function(){
          this.$router.back();
          //或者下面
      },
      back1: function(){
          window.history.back();
      },
      test(num){
          this.child = num;
      },
//    ...mapActions(['add'])
//    ...mapMutations(['ADD'])
  }
}
export default Hellos;
</script>

vuex:

/*
const store = new Vuex.Store({  
  state: {  
    count: 10,  
    numb: 10086  
  },  
  getters: {  
    add: (state, getter) => {  
      state.count = getter.add;  
      return state.count;  
    },  
  },  
  mutations: {
    ADD:function(state){
        state.count ++;
    },
    MINUS:function(state){
        state.count --;
    }
  },  
  actions: {  
    add({commit}) {  
        commit("ADD");
    },
    minus({commit}){
        commit("MINUS");
    }
  }  
});  
  
export default store; */

 

上一篇:uni-app 使用vuex(vuex module)


下一篇:关于Vuex的使用以及自己的一些理解