vuex使用笔记

vuex的基本使用

安装

npm install vuex --save

导入到项目

import Vuex from 'vuex'
Vue.use(Vuex)

创建Store对象

const Store = new Vuex.Store({
    state:{
        data:'this is data.state中就是全局共享的数据'
    }
})

挂载到实例中

new Vue({
    el:"#app",
    render:h=>h(app),
    router,
    store
})

组件中使用store中的数据(state)

通过 this.$store.state.变量名称

<template>
	<div>
		 <!-- 方式一: 通过this.$store.state.变量名称调用state中的数据，this在此可以省略 -->
		<h1>当前最新的count值为：{{$store.state.count}}</h1>
		<button>+1</button>
	</div>
</template>

通过mapState函数

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

<script>
	import { mapState } from 'vuex'
	export default{
		data (){
			return{
			}
		},
		computed:{
			...mapState(['count'])
		}
	}
</script>

组件中修改store中的数据(mutation)

方式一:通过this.$store.commit(‘函数名’)调用mutation中的函数来修改

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
		count:0
  },
  mutations: {
      add(state){
          state.count++
      },
      sub(state){
          state.count--
      }
  },
  actions: {
  },
  modules: {
  }
})

<template>
	<div>
		<!-- 方式一: 通过this.$store.state.变量名称调用state中的数据，this在此可以省略 -->
		<h1>当前最新的count值为：{{$store.state.count}}</h1>
		<button @click="addNum">+1</button>
	</div>
</template>
<script>
	export default{
		data (){
			return{
			}
		},
		methods:{
			addNum(){
				this.$store.commit('add')
			}
		}
	}
</script>

调用有参数的mutation

mutations: {
    addN(state,step){
        state.count+=step
    }
},

<template>
	<div>
		<!-- 方式一: 通过this.$store.state.变量名称调用state中的数据，this在此可以省略 -->
		<h1>当前最新的count值为：{{$store.state.count}}</h1>
		<button @click="addNum">+1</button>
		<button @click="addAudNum">+3</button>
	</div>
</template>

<script>
	export default{
		data (){
			return{
			}
		},
		methods:{
			addNum(){
				this.$store.commit('add')
			},
			addAudNum(){
				this.$store.commit('addN',3)
			}
		}
	}
</script>

方式二:使用mapMutation函数

<template>
	<div>
		<h1>当前最新的count值为：{{ count }}</h1>
		<button @click="subNum">-1</button>
	</div>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default{
		data (){
			return{
			}
		},
		computed:{
			...mapState(['count'])
		},
		methods:{
			// 将mutation中的函数通过mapMutation映射过来然后直接调用即可
			...mapMutations(['sub']),
			subNum(){
				this.sub()
			}
		}
	}
</script>

通过mapMutation调用带参数的函数

mutations: {
    subN(state,step){
        state.count-=step
    }
},

<template>
	<div>
		<h1>当前最新的count值为：{{ count }}</h1>
		<button @click="subNum">-1</button>
		<button @click="subAudNum">-N</button>
	</div>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default{
		data (){
			return{
			}
		},
		computed:{
			...mapState(['count'])
		},
		methods:{
			// 将mutation中的函数通过mapMutation映射过来然后直接调用即可
			...mapMutations(['sub','subN']),
			subNum(){
				this.sub()
			},
			subAudNum(){
				this.subN(5)
			}
		}
	}
</script>

异步操作store中的数据(Action)

如果要异步操作state中的数据,必须在Action中进行操作,不能使用mutation,但是在Action中还是要通过触发mutation的方式间接变更数据

方式一:在Actions中定义异步函数并在组件中通过this.$store.dispatch(‘异步函数名’)来调用

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
		count:0
  },
	// 只有mutation有修改state中数据的权利
  mutations: {
		add(state){
			state.count++
		},
		sub(state){
			state.count--
		},
		addN(state,step){
			state.count+=step
		},
		subN(state,step){
			state.count-=step
		},
  },
  actions: {
		// 在actions中不能直接修改state的数据,必须通过context.commit()触发mutation中的函数才行
		addAsync(context){
			setTimeout(()=>{
				context.commit('add')
			},1000)
		}
  },
  modules: {
  }
})

<template>
	<div>
		<!-- 方式一: 通过this.$store.state.变量名称调用state中的数据，this在此可以省略 -->
		<h1>当前最新的count值为：{{$store.state.count}}</h1>
		<button @click="addNum">+1</button>
		<button @click="addAudNum">+3</button>
		<button @click="addNumAsync">+1 Async</button>
	</div>
</template>
<script>
	export default{
		data (){
			return{
			}
		},
		methods:{
			addNum(){
				this.$store.commit('add')
			},
			addAudNum(){
				this.$store.commit('addN',3)
			},
			addNumAsync(){
				this.$store.dispatch('addAsync')
			}
		}
	}
</script>

携带参数的action异步函数

actions: {
    addAsync(context,step){
        setTimeout(()=>{
            context.commit('addN',step)
        },1000)
    }
  },

<template>
	<div>
		<h1>当前最新的count值为：{{$store.state.count}}</h1>
		<button @click="addNAsync">+N Async</button>
	</div>
</template>
<script>
	export default{
		data (){
			return{
			}
		},
		methods:{
			addNAsync(){
				this.$store.dispatch('addNAsync',10)
			}
		}
	}
</script>

方式二:通过mapActions调用

actions: {
    subAsync(context){
        setTimeout(()=>{
            context.commit('sub')
        },1000)
    }
},

<template>
	<div>
		<h1>当前最新的count值为：{{ count }}</h1>
        <!-- 可以直接在此处调用映射过来的方法 -->
		<button @click="subAsync">-1 Async</button>
        <!-- 也可以直接用过自定义函数调用 -->
        <!-- <button @click="subNumAsync">-1 Async</button>-->
	</div>
</template>

<script>
	import { mapActions } from 'vuex'
	export default{
		data (){
			return{
			}
		},
		methods:{
			...mapActions(['subAsync']),
            /*
            subNumAsync(){
            	this.subAsync
            }
            */
		}
	}
</script>

携带参数

actions: {
    subNAsync(context,step){
        setTimeout(()=>{
            context.commit('subN',step)
        },1000)
    },
},

<template>
	<div>
		<h1>当前最新的count值为：{{ count }}</h1>
		<button @click="subNAsync(10)">-N Async</button>
	</div>
</template>

<script>
	import { mapActions } from 'vuex'
	export default{
		data (){
			return{
			} 
		},
		methods:{
			...mapActions(['subNAsync']),
		}
	}
</script>