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中的数据
- 只能通过mutation变更store数据，不可以直接操作store中的数据
- 通过这种方式可以集中监控所有数据的变化
定义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的第二种方法
- 从vuex中按需导入mapMutations函数
import { mapMutations} from ‘vuex’
- 通过导入的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的方式间接变更数据
- 注册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: {
}
})
- 触发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中的数据进行加工处理成新的数据
- getter可以对store中已有的数据加工处理之后形成新的数据，类似于计算属性
- 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>