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>