vue基础知识介绍

huahua_kee

Vuex之理解Mutations的用法实例1.什么是mutations？上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据)，Vue的视图是由数据驱动的，也就是说state里面的数据是动态变化的，那么怎么改变呢，切记在Vuex中store数据改变的唯一方法就是mutation！通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。2.怎么用mutations？mutation结构：每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。const store = new Vuex.Store({
  state: {
    count: 1
    },
  mutations: {
  increment (state) {   //注册时间，type:increment，handler第一个参数是state；
     // 变更状态
    state.count++}}})
​
  store.commit('increment')  //调用type，触发handler（state）载荷（payload）:简单的理解就是往handler(stage)中传参handler(stage,pryload)；一般是个对象。 mutations: {
increment (state, n) {
   state.count += n}}
store.commit('increment', 10)
mutation-types：将常量放在单独的文件中，方便协作开发。
  // mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
  // store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
​
const store = new Vuex.Store({
  state: { ... },
  mutations: {
   // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
  [SOME_MUTATION] (state) {
  // mutate state
}
}
})commit：提交可以在组件中使用this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations辅助函数将组件中的 methods映射为 store.commit调用（需要在根节点注入 store）。import { mapMutations } from 'vuex'
​
export default {
​
methods: {
...mapMutations([
  'increment' // 映射 this.increment() 为
this.$store.commit('increment')]),
...mapMutations({
  add: 'increment' // 映射 this.add() 为
this.$store.commit('increment')
})}}vuex学习之Actions的用法详解Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态. Action 是异步的，mutation是同步的。沿用vuex学习---简介的案例：这里是加10 减11.在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>
&#8203;
    <p>组件内部count{{count}}</p>
    <p>
      <button @click = "addplus">+</button>
      <button @click = "subplus">-</button>
    </p>
    </p>
&#8203;
  </div>
</div>
</template>
&#8203;
<script>
//引入mapGetters
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:'app',
data(){
   return {
&#8203;
   }
},
computed:{
   ...mapState([
     "count"
     ]),
},
methods:{
   ...mapActions([
      "addplus",
      "subplus"
     ])
}
&#8203;
}
</script>
&#8203;
<style>
&#8203;
</style>浅谈vuex之mutation和action的基本使用我们要实现的很简单，就是点击+1的count加一，点击-1的时候count-1一、mutation在vue 中，只有mutation 才能改变state. mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字，action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字，commit mutation 之后， 要做什么事情，那就需要给它指定一个处理函数， 类型(名字) + 处理函数就构成了mutation. 现在test.js添加mutation.const store = new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    // 加1
    increment(state) {
      state.count++;
    },
    // 减1
    decrement(state) {
      state.count--
    }
  }
})Vue 建议我们mutation 类型用大写常量表示，修改一下，把mutation 类型改为大写mutations: {
    // 加1
    INCREMENT(state) {
      state.count++;
    },
    // 减1
    DECREMENT(state) {
      state.count--
    }
  }二、actionaction去commit mutations, 所以还要定义action. test.js 里面添加actions.const store = new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    // 加1
    INCREMENT(state) {
      state.count++;
    },
    // 减1
    DECREMENT(state) {
      state.count--
    }
  },
  actions: {
    increment(context) {
      context.commit("INCREMENT");
    },
    decrement(context) {
      context.commit("DECREMENT");
    }
  }
})action 和mutions 的定义方法是类似的，我们要dispatch 一个action, 所以actions 肯定有一个名字，dispatch action 之后它要做事情，就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context, 它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性， context.commit 就会执行commit命令。其实actions 还可以简写一下， 因为函数的参数是一个对象，函数中用的是对象中一个方法，我们可以通过对象的解构赋值直接获取到该方法。修改一下 actionsactions: {
    increment({commit}){
      commit("INCREMENT")
    },
    decrement({commit}){
      commit("DECREMENT")
    }
  }三、dispatch action现在就剩下dispatch action 了。什么时候dispatch action 呢？ 只有当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.这个时候我们需要新建一个操作组件，我们暂且命名为test.vue<template>
<div>
  <div>
    <button @click="add">+1</button>
    <button @click="decrement">-1</button>
  </div>
</div>
</template>然后，我们在methods里面获取这两个操作事件<script>
  export default {
    methods: {
      increment(){
        this.$store.dispatch("increment");
      },
      decrement() {
        this.$store.dispatch("decrement")
      }
    }
  }
</script>当然上面这种写法比较麻烦，vuex还给我我们提供了mapActions这个函数，它和mapState 是一样的，把我们的 action 直接映射到store 里面的action中。<script>
&#8203;
　　　 import {mapActions} from 'vuex'
  export default {
    methods: {
      ...mapActions(['increment', 'decrement'])
    }
  }
</script>如果事件处理函数名字和action的名字不同，给mapActions提供一个对象，对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。<script>
import {mapActions} from 'vuex'
export default {
methods: {
  // 这中写法虽然可行，但是比较麻烦
  // 这时vue 提供了mapAction 函数，
  // 它和mapState 是一样的，把我们的 action 直接映射到store 里面的action中。
  // increment () {
  //  this.$store.dispatch('increment')
  // },
  // decrement () {
  //  this.$store.dispatch('decrement')
  // }
  // 下面我们使用一种比较简洁的写法
  // ...mapActions(['increment', 'decrement'])
  /**
   如果事件处理函数名字和action的名字不同，给mapActions
   提供一个对象，对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。
  */
  // 这里实际是为了改变事件的名字
  ...mapActions(['decrement']),
  ...mapActions({
   add: 'increment'
  })
}
}
</script>这时候我们单击按钮，就可以看到count 发生变化。

可爱的男孩子

这种内容就别发了
vue最好的学习办法是看官方文档
你发出来的排版还这么差

清风听不见声音

VUE官方文档我感觉讲的很粗略