vuex共享数据

组件之间的共享方式：

父向子传值：v-bind

子向父传值：v-on

兄弟之间的共享：EventBus

• $on：接收数据的那个组件
• $emit：发送数据的那个组件

vuex 是实现组件全局状态状态（数据）管理的一种机制，方便实现组件之间的数据共享

1. 使用vuex的好处：

1. 能够在vuex 中集中管理共享的数据，易于开发和后期维护
2. 能够 高效的实现组件之间的数据共享 ，提高开发效率 
3. 存储在vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

2. 安装：

安装： cnpm i vuex -S

导入：

import Vuex from 'vuex'

Vue.use(Vuex)

创建store对象：

const store = new Vuex.store({

// state 里面存储的就是共享数据

state: {count: 0}

})

将store 对象挂载到vue的的实例中：

new Vue({

store

})

3. 创建一个vuex的项目：

cmd中使用命令行打开vue 的可视化面板：vue ui

4. 发布：

git status

git add .

git status （变绿)

git commit -m '初始化项目的基本结构'

5. vuex 中的核心概念

1. State 提供唯一的公共数据源，所有的共享数据都要统一放到Store的State 中进行存储

1. 组件中访问State中数据的方式：
2. this.$store.state.数据名称
3. 第二种方式：
4. 按需导入  mapState 函数：import { mapState } from 'vuex'
5. 通过导入的函数，将当前的组件需要的全局数据，映射为当前组件的computed 计算属性
6. computed: { ...mapState(['count']) }

2. Mutation 用于变更 Store 中的数据

1. 在vuex 中不推荐直接使用$store.state.xx修改数据
2. 通过这种方式虽然操作稍微繁琐，但hi可以集中监控所有数据的变化
3. mutations: { add(state) { state.count++ } }
4. 触发 mutations 的第一种方式：
5. this.$store.commit('mutation_handler')
6. 在commit 函数里，可以在第一个参数后面携带需要传递的参数
7. 触发 mutations 的第二种方式
8. 按需导入： import { mapMutations } from 'vuex'
9. 映射为 methods 函数： methods: { ...mapMutations(['add', 'addN']) }
10. 在 mutaions函数中不要写异步的代码
11. 如果 非要写异步代码，在Action函数中

3. Action 用于处理异步任务

如果通过异步操作变更数据，必须通过Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式访问变更数据

1. actions: { addAsync(context) { setTimeout( () => { context.commit( 'add' ) } ,1000) } }
2. 触发actions 的第一种方式：methods: { handle() { this.$store.dispatch('addAsync') } }
3. actions 只能通过mutations 中的函数，才能修改 state  属性中的值
4. 只有 mutations 中定义的函数，才有权力修改 state 中的数据
5. 而action并没有修改 state 属性的权力
6. 通过dispatch() 中的第二个参数进行传参
7. 触发actions 的第二种方式：
8. 按需导入 mapActions ：import { mapActions } from 'vuex'
9. 映射为组件的methods 函数：methods: { ...mapActions([ 'addAsync' ]keyi) }
10. 可以直接对映射过来的函数在@click 中进行调用，不用每次在新建一个事件函数

4. Getter 用于对Store 中的数据进行加工处理形成新的数据，类似于计算属性

1. Store 中的数据发生变化， Getter 的数据也会跟着变化（响应式的操作）
2. getters: { showNum: state => { return ' 当前 '+ state.count } }
3. 第一种方式：用插值表达式进行调用 {{ $store.getter.showNum }}
4. 第二种调用方式：import { mapGetter } from 'vuex'
5. computed: { ...mapGetters({ 'showNum' }) }

5. Modules：分割模块