Vuex的使用

记录总结下Vuex的学习以及复习的过程吧，更加的巩固了其使用的方式和深入理解。

一、安装vuex

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
    	index:0
    }
})
// 将store对象暴露出去，并且挂载到vue实例中
export default store;

二、使用store

1. 可以直接通过$store对象将store中的数据取出，‘$store.state.index`
   
2. 如果需要使用到很多vuex中的状态数据，就会变得非常的冗余。vue给我们提供了辅助函数帮助我们生产计算属性，可以少很多的代码。

<template>
  <div>
    我是home頁
    {{ index }}
  </div>
</template>

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

三、使用Mutations

如果说要修改vuex中的store，唯一的方式是提交mutation，实际上我们也正是这样去做的，可以让我们更容易理解代码中状态的改变。每一个mutation都会有一个字符串的事件类型和回调函数，这个回调函数会提供state作为第一个参数，可以获取到state中的数据进行修改。

1. 通过vue实例中的$store来commit

const store = new Vuex.Store({
    state:{
        index:1
    },
    mutations:{
        changeAccount(state,newValue){
            state.index += newValue
        }
    }
})

<template>
  <div>
    我是home頁
    {{ index }}
    <button @click="toClick">提交vuex中状态</button>
  </div>
</template>

<script>
  export default {
    methods:{
      toClick(){
        //使用$store来提交
        this.$store.commit('changeAccount',10)
      }
    }
  }
</script>

2. 对象风格的提交方式

const store = new Vuex.Store({
    state:{
        index:1
    },
    mutations:{
        changeAccount(state,newValue){
        	// newValue其实传过来的是一个对象
            state.index += newValue.index
        }
    }
})

<template>
  <div>
    我是home頁
    {{ index }}
    <button @click="toClick">提交vuex中状态</button>
  </div>
</template>

<script>
  export default {
    methods:{
      toClick(){
        // 对象风格的提交方式
        this.$store.commit({
          type:'changeAccount',
          index:10
        })
      }
    }
  }
</script>

3. 使用辅助函数提交方式

const store = new Vuex.Store({
    state:{
        index:1
    },
    mutations:{
        changeAccount(state,newValue){
            state.index += newValue
        }
    }
})

<template>
  <div>
    我是home頁
    {{ index }}
    <button @click="toClick">提交vuex中状态</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
  export default {
    methods:{
      ...mapMutations(['changeAccount']),
      toClick(){
        //使用辅助函数来提交
        this.changeAccount(10)
      }
    }
  }
</script>

四、使用Getters

Getters是相当于计算属性的东西，它的返回值也有缓存的特性，且只有当它依赖值发生改变才会被重新计算。同样的，也接受state作为第一个参数。

1. 直接通过$store.getters对象来访问

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        index:1
    },
    getters:{
        AccountAdd(state){
            return state.index + 'isMe'
        }
    }
})
export default store

<div>{{ $store.getters.AccountAdd }}</div>

2. getter中传递参数
   看了官网中的getTodoByid:(state)=>(id)=>{}的这种写法，一开始并不是特别的好理解，但拆开后，(id)=>{}这不就是一个匿名函数，那么可以直接写成这样。

AccountLength(state){
	return (newValue)=>{
		return state.index + newValue.length
	}
}

<div>{{ $store.getters.AccountLength('123') }}</div>

3. 通过辅助函数mapGetters来访问，直接上代码

<template>
  <div>
    我是home頁
    {{ AccountAdd }}
    {{ AccountLength('123456') }}
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
  export default {
    computed:{
      ...mapGetters(['AccountAdd','AccountLength'])
    }
  }
</script>

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        index:1
    },
    mutations:{ },
    getters:{
        AccountAdd(state){
            return state.index + 'isMe'
        },
        AccountLength(state){
            return (newValue)=>{
                return state.index + newValue.length
            }
        }
    }
})
export default store

五、使用Action

Action跟Mutations差不多，不同的是，他提交的是Mutations，并不是直接变更状态；在Action中可以异步操作，而Mutations中只能同步执行；在Action中有一个参数可以直接调用store实例方法和属性，如content.state调用store实例中的state，content.getters调用store实例中的getters。

1. actions调用需要使用dispatch

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        index:1
    },
    mutations:{
        changeAccount(state,newValue){
            state.index += newValue
        }
    },
    getters:{ },
    actions:{
        commitAccount1(content,newVal){
            content.commit('changeAccount',newVal)
        },
        // 也可以直接使用结构赋值的方式减少重复的代码量
        commitAccount2({ commit },newVal){
			commit('changeAccount',newVal)
        },
        // 可以写异步的代码，在mutations中写异步代码直接没有效果
        commitAccount3(content,newVal){
            setTimeout(()=>{
                content.commit('changeAccount',newVal)
            },1000)
        }
    }
})
export default store

this.$store.dispatch('commitAccount',10)

2. 对象的方式来进行分发

methods:{
	toClick(){
		this.$store.dispatch({
			type:'commitAccount',
			data:10
		})
	}
}

3. 使用辅助函数mapAction

<template>
  <div>
    我是home頁
    {{ index }} /
    {{ AccountLength('123456') }}
    <button @click="$router.push('/back')">点我去back页吧</button>
    <button @click="toClick">提交vuex中状态</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
  export default {
    methods:{
      ...mapActions(['commitAccount']),
      toClick(){
        this.commitAccount(10)
      }
    }
  }
</script>