首页 > > 网页制作 > Javascript >

Vuex总结

2018-06-24 00:52:00来源：未知阅读 ()

Vuex官网链接：https://vuex.vuejs.org/zh-cn/strict.html

Vuex

是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
帮助我们管理新的共享状态
适合于开发大型单页应用

1.开始安装

在Vue-cli架构中 nmp i vuex --save

在src下新建目录vuex/store.js

2.store.js配置

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
 
var state={  //
    count:1
};
var mutations={
    add(state,n){
        state.count+=n
    },
    reduce(state){
       state.count--
    }
}
export default new Vuex.Store({//暴露出口
    state,mutations
})

3.五大方法

1.state

用于数据管理，可以通过computed直接返出，也可以组件调用，也可以借助mapState()管理

<template>
  <div>
      <h1>方法一:全局引入{{$store.state.count}}</h1>
      <h1>方法二:computed引入{{count}}</h1>
      <h1>方法三:mapState引入{{count1}}</h1>
  </div>
 
</template>
<script>
import store from"@/vuex/store";
import {mapState} from"vuex"
export default {
  computed:{
      count:function(){return this.$store.state.count},
      ...mapState(['count1'])
  },
  store
}
</script>

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用

var state={  //
    count:1,
    count1:2
};
export default new Vuex.Store({//暴露出口
    state
})

2. getter

主要用于数据的过滤，直接通过computed调用，也可以mapGetters()

<template>
  <div>
      <h1>mapGetters引入{{count_get}}</h1>
  </div> 
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapGetters} from"vuex"
export default {
  computed:{
      ...mapGetters(['count_get'])
  },
  store
}
</script>

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={  //
    count:1,
};
var getters={
    count_get(state){
        return state.count+1
    }
};
export default new Vuex.Store({//暴露出口
    state,getters
})

3.mutations

主要用于储存公共方法

直接mapMutations()调用或者commit提交以及传值

<template>
  <div>
      <h1>count的值{{$store.state.count}}</h1>
      <h3>mapMutations方法: <input type="button" value="按钮1" @click=add></h3>
      <h3>$store.commit()方法: <input type="button" value="按钮2" @click="$store.commit('reduce')"></h3>
      <h3>传参方法: <input type="button" value="+10" @click="$store.commit('xx',10)"></h3>      
  </div> 
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapMutations} from"vuex"
export default {
 methods:mapMutations(['add']),
  store
}
</script>

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={  //
    count:1,
};
var mutations={
    add(state){
        return state.count++
    },
    reduce(state){
        return state.count--
    },
    xx(state,n){
        return state.count+=n
    }
}
export default new Vuex.Store({//暴露出口
    state,mutations
})

4.actions用于异步方法

<template>
  <div>
      <h1>count的值{{$store.state.count}}</h1>
      <h1>mapActions的methods引入: <input type="button" value="+5 3s -1" @click="add1"></h1>    
  </div> 
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapMutations,mapActions} from"vuex"
export default {
    methods:mapActions(['add1']),store
}
</script>

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={  //
    count:1,
};
var mutations={
    add(state){
        state.count+=5;
        return state.count
    }
};
var actions={
    add1:function(context){
        context.commit('add');
        setTimeout(()=>{
            state.count--
        },2000)
    }
}
export default new Vuex.Store({//暴露出口
    state,mutations,actions
})

5.modules

对于大型项目，进行模块化分组管理，store.js可以引入多个类似于store.js的文件，在总文件进行模块化状态管理

<template>
  <div>
      <h1>count的值{{$store.state.a.count}}</h1>
      <h1>mapActions的methods引入: <input type="button" value="+5 3s -1" @click="add1"></h1>    
  </div> 
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapMutations,mapActions} from"vuex"
export default {
    methods:mapActions(['add1']),store
}
</script>

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={  //
    count:1,
};
var mutations={
    add(state){
        state.count+=5;
        return state.count
    }
};
var actions={
    add1:function(context){
        context.commit('add');
        setTimeout(()=>{
            state.count--
        },2000)
    }
}
var moduleA={
    state,mutations,actions
}
export default new Vuex.Store({//暴露出口
    modules:{a:moduleA}
})