vuex补充:state存储数据,mutation修改数据(传参),action处理异步(传参),getters

1、组件访问state的第一种方法

this.$store.state.全局数据名称

2、组件访问state的第二种方法

  • 从vuex中按需导入mapState函数
import{ mapState } from ‘vuex’
  • 将全局数据,映射为当前组件的计算属性
 computed:{
 	...mapState(['count'])
 }

完整代码:

<template>
  <div>
    <h3>当前最新的count值为:{{count}}</h3>
    <button>-1</button>
  </div>

</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'Subtraction',
    data(){
      return {

      }
    },
    computed:{
      ...mapState(['count'])//不用写计算属性的逻辑
    }
  }
</script>

<style scoped>

</style>

3、Mutation中修改数据

推荐使用mutation变更store中的数据

  1. 只能通过mutation变更store数据,不可以直接操作store中的数据
  2. 通过这种方式可以集中监控所有数据的变化

定义mutation

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      //变更状态
      state.count++
    }
  },
  actions: {
  },
  modules: {
  }
})

触发mutation

methods:{
	handlel(){
		//触发mutations的第一种方式
		this.$store.commit('add')
	}
}

完整代码:
store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    }
  },
  actions: {
  },
  modules: {
  }
})

app.vue

<template>
  <div id="app">
    <my-addition> </my-addition>
    <hr/>
    <my-subtraction></my-subtraction>
  </div>
</template>
<script>
  import Addtion from './components/Addtion.vue'
  import Subtraction from './components/Subtraction.vue'

  export default {
    name:'App',
    data(){
      return{

      }
    },
    components:{
      'my-addition':Addtion,
      'my-subtraction':Subtraction
    }
  }
</script>

<style>

</style>

addtion.vue

<template>
  <div>
    <h3>当前最新的count值为:{{$store.state.count}}</h3>
    <button @click="addcount">+1</button>
  </div>
</template>

<script>
  export default {
    name: 'Addtion',
    data(){
      return{
      }
    },
    methods:{
      addcount(){
        //第一种方法
        this.$store.commit('add')
      }
    }
  }
</script>

<style scoped>

</style>

4、Mutation中传参

定义mutation

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    addN(state,step){
      //变更状态
      state.count+=step
    }
  },
  actions: {
  },
  modules: {
  }
})

触发mutation

methods:{
	handlel(){
		//触发mutations的第一种方式
		this.$store.commit('add',N)
	}
}

完整案例
store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state,N){
      state.count+=N
    }
  },
  actions: {
  },
  modules: {
  }
})

app.vue

<template>
  <div id="app">
    <my-addition> </my-addition>
    <hr/>
    <my-subtraction></my-subtraction>
  </div>
</template>
<script>
  import Addtion from './components/Addtion.vue'
  import Subtraction from './components/Subtraction.vue'

  export default {
    name:'App',
    data(){
      return{

      }
    },
    components:{
      'my-addition':Addtion,
      'my-subtraction':Subtraction
    }
  }
</script>

<style>

</style>

addtion.vue

<template>
  <div>
    <h3>当前最新的count值为:{{$store.state.count}}</h3>
    <button @click="addcount(10)">+1</button>
  </div>
</template>

<script>
  export default {
    name: 'Addtion',
    data(){
      return{
      }
    },
    methods:{
      addcount(N){
        //第一种方法
        this.$store.commit('addN',N)
      }
    }
  }
</script>

<style scoped>

</style>

5、Mutation中触发mutations的第二种方法

  1. 从vuex中按需导入mapMutations函数
import { mapMutations} from ‘vuex’
  1. 通过导入的mapMutation函数,将需要的mutations函数,映射为当前组件的methods方法
methods:{
	...mapMutations(['add','addN'])
}

完整代码
store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    },
    addN(state,N){
      state.count+=N
    }
  },
  actions: {
  },
  modules: {
  }
})

app.vue

<template>
  <div id="app">
    <my-addition> </my-addition>
    <hr/>
    <my-subtraction></my-subtraction>
  </div>
</template>
<script>
  import Addtion from './components/Addtion.vue'
  import Subtraction from './components/Subtraction.vue'

  export default {
    name:'App',
    data(){
      return{

      }
    },
    components:{
      'my-addition':Addtion,
      'my-subtraction':Subtraction
    }
  }
</script>

<style>

</style>

addtition.vue

<template>
  <div>
    <h3>当前最新的count值为:{{$store.state.count}}</h3>
    <button @click="add()">+1</button>
    <button @click="addN(10)">+10</button>
    <button @click="myaddN(10)">+10</button>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    name: 'Addtion',
    data(){
      return{

      }
    },
    methods:{
      ...mapMutations(['add','addN']),
      myaddN(N){
        this.addN(N)
      }
    }
  }
</script>

<style scoped>

</style>

6、action中处理异步任务(含传参)

必须使用action来处理异步任务,但是,在action中最终还是要通过触发mutation的方式间接变更数据

  1. 注册action
export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    },
    addN(state,N){
      state.count+=N
    }
  },
  actions: {
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      },2000)
    },
    addAsyncN(context,N){
      setTimeout(()=>{
        context.commit('addN',N)
      },2000)
    }
  },
  modules: {
  }
})
  1. 触发action
<template>
  <div>
    <h3>当前最新的count值为:{{$store.state.count}}</h3>
    <button @click="myaddAsync">+1异步</button>
    <button @click="myaddNAsync(100)">+100异步</button>

  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    name: 'Addtion',
    data(){
      return{

      }
    },
    methods:{
      myaddAsync(){
        //触发actions的第一种方式
        this.$store.dispatch('addAsync')
      },
      myaddNAsync(N){
        //触发actions的第一种方式
        this.$store.dispatch('addAsyncN',N)
      }
    }
  }
</script>

7、action中触发actions的第二种方法

1. 从vuex中按需导入mapActions函数

import { mapActions} from ‘vuex’

2. 通过刚才导入的mapAction函数,将需要的actions函数,映射为当前组件的methods方法:
触发actions方法

methods:{
      ...mapActions(['addAsync','addAsyncN']),
    }

上例基础上修改addtion.vue文件
addtion.vue

<template>
  <div>
    <h3>当前最新的count值为:{{$store.state.count}}</h3>
    <button @click="myaddAsync">+1异步</button>
    <button @click="myaddNAsync(100)">+100异步</button>
    <button @click="secaddNAsync(1000)">+1000异步</button>
  </div>
</template>

<script>
  import {mapMutations,mapActions} from 'vuex'
  export default {
    name: 'Addtion',
    data(){
      return{

      }
    },
    methods:{
      myaddAsync(){
        //触发actions的第一种方式
        this.$store.dispatch('addAsync')
      },
      myaddNAsync(N){
        //触发actions的第一种方式
        this.$store.dispatch('addAsyncN',N)
        console.log(N)
      },
      ...mapActions(['addAsync','addAsyncN']),
      secaddNAsync(N){
        this.addAsyncN(N)
      }
    }
  }
</script>

<style scoped>

</style>

8、Getter

getter用于对store中的数据进行加工处理成新的数据

  1. getter可以对store中已有的数据加工处理之后形成新的数据,类似于计算属性
  2. Store中数据发生变化,getter的数据也会跟着变化

定义getter

getters:{
	showNum:state=>{
	return '当前最新的数量是'+state.count
	}
}

使用getters的第一种方法

this.$store.getters.名称

使用getters的第二种方法

  import {mapGetters} from 'vuex'

computed:{
      ...mapGetters(['addcount']),
 }

完整代码:
store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  getters:{
    addcount:state => {
      return state.count+=15
    }
  },
  mutations: {
    add(state){
      state.count++
    },
    addN(state,N){
      state.count+=N
    }
  },
  actions: {
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      },2000)
    },
    addAsyncN(context,N){
      setTimeout(()=>{
        context.commit('addN',N)
      },2000)
    }
  },
  modules: {
  }
})

addtion.vue

<template>
  <div>
    <h3>当前最新的count值为:{{$store.getters.addcount}}</h3>
    <h3>当前最新的count值为:{{addcount}}</h3>
    <button @click="myaddAsync">+1异步</button>
    <button @click="myaddNAsync(100)">+100异步</button>
    <button @click="secaddNAsync(1000)">+1000异步</button>
  </div>
</template>

<script>
  import {mapMutations,mapActions,mapGetters} from 'vuex'
  export default {
    name: 'Addtion',
    data(){
      return{

      }
    },
    computed:{
      ...mapGetters(['addcount']),
    },
    methods:{
      myaddAsync(){
        //触发actions的第一种方式
        this.$store.dispatch('addAsync')
      },
      myaddNAsync(N){
        //触发actions的第一种方式
        this.$store.dispatch('addAsyncN',N)
        console.log(N)
      },
      ...mapActions(['addAsync','addAsyncN']),

      secaddNAsync(N){
        this.addAsyncN(N)
      }
    }
  }
</script>

<style scoped>

</style>

你可能感兴趣的:(Vue,前端,javascript,vue.js)