- 集中管理共享的数据，易于开发和后期维护；
- 能够高效的实现组件之间的数据共享，提高开发效率；
- 存储在Vuex的数据是响应式的，能够实时保持页面和数据的同步；
安装Vuex依赖包
npm install vuex --save
导入包
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)
创建store对象
const store = new Vuex.Store({state: {},mutations: {}，actions：{}，getters: {}
})
将store对象挂载到vue的实例中
new Vue({el: '#app',render: h => h(app),router,//将创建的共享数据对象挂载到vue的实例中，所有的组件就可以直接从store中获取全局的数据了store
})State和Mutation
State
State提供了唯一的数据公共源，所有共享的数据都要统一放到store的state进行存储；
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存储一个count数据},
})访问State数据
方式一：$store.state.数据名
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性 (computed)中返回某个状态：
<template><div> <p>从state中拿到的{{conut}}</p><!-- 或者--><p>从state中拿到的{{$store.state.count}}</p></div> </template><script> export default {computed: {conut() {return this.$store.state.count}}, } </script> <style></style>
方式二：mapState 辅助函数
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
<template><div> <p>从state中拿到的{{conut}}</p></div> </template>//从Vuex中按需导入mapState 函数 import { mapState } from 'vuex'<script> export default {computed: {//将全局数据映射为当前组件的计算属性...mapState (['conut'])}, } </script> <style></style>
Mutation
只有通过Mutation才能变更Store的数据，不能直接在组件中操作Store的数据；
在Mutation统一操作Store的数据虽然比较繁琐，但是便于集中监控所有数据的变化；
一条重要的原则就是要记住 mutation 必须是同步函数，一些异步函数我们要放到后面讲的action中处理；
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存储一个count数据},mutations: {add(state){//变更state中的count数据state.count++}}，
})触发Mutation来改变数据
在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。
<template><div> <p>从state中拿到的{{$store.state.count}}</p><button @click = "addCount"></button></div>
</template>//从Vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'<script>
export default {methods:{// 第二种方式：将 `this.addCount()` 映射为 `this.$store.commit('add')`//...mapMutations(['add'])，addCount(){//第一种方式：使用 this.$store.commit('xxx') 提交 mutationthis.$store.commit('add') }}
}
</script>
<style></style>组件触发Mutation时传递参数
首先要在mutations中写好接受参数的函数
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存储一个count数据},mutations: {add(state，num){//变更state中的count数据state.count += num}}，
})组件触发Mutation调用更改函数并提交参数
<template><div> s<p>从state中拿到的{{$store.state.count}}</p><button @click = "addCount"></button></div>
</template><script>
export default {methods:{addCount(){//第一种方式：使用 this.$store.commit('xxx') 提交 mutationvar num = 5this.$store.commit('add' ，num ) }}
}
</script>
<style></style>Action
Action用于处理异步任务
如果通过异步操作变更数据，必须通过Action
，而不是使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。Action 提交的是 mutation
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation。
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存储一个count数据},mutations: {add(state){//变更state中的count数据state.count++}}，actions:{asyncAdd(context){setTimeout(() => { //这里用定时器假设是异步操作context.commit('add') //这里还是触发mutations中的add方法更改count数据}, 1000)}}
})简化代码
actions:{asyncAdd({commit}){setTimeout(() => { commit('add')}, 1000)}}触发Action中的异步函数
第一种方式：通过 this.$store.dispatch 方法触发
methods:{addCount(){this.$store.dispatch('asyncAdd')}}第二种方式：mapActions辅助函数
<template><div> <!-- 这里点击事件可以直接写成actions函数事件名 --><button @click = "asyncAdd"></button> </div> </template>//从Vuex中按需导入mapActions函数 import { mapActions} from 'vuex'<script> export default {methods: {//将指定的actions函数，映射为当前组件的methods函数...mapActions(['asyncAdd'])}, } </script>
触发Action异步时携带参数
首先要先更改一下mutations和actions中的函数
mutations: {add(state,num){//变更state中的count数据state.count += num} }， actions:{asyncAdd({commit},num){setTimeout(() => { commit('add',num)}, 1000)}}然后还是通过 this.$store.dispatch 方法触发
methods:{addCount(){var num = 5this.$store.dispatch('asyncAdd',num )}}
Getter
Getter用于对Store中的数据进行加工处理形成新的数据；
Getter可以对Store中已有的数据进行加工处理形成新的数据，类似Vue的计算属性
Store中的数据发生变化，Getter的数据也会跟着发生变化
Getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存储一个count数据},getters: {newCount:state => {return ‘最新值是’+ state.count}}
})访问Getter的数据
第一种方式：通过 this.$store.getters方法触发
computed:{count(){return this.$store.getters. newCount}}第二种方式：mapActions辅助函数
//从Vuex中按需导入mapGetters 函数 import { mapGetters } from 'vuex'<script> export default {computed: {//将 store 中的 getter 映射到组件计算属性...mapGetters (['newCount'])}, } </script>
