vuex的基本使用

Vuex

1. Vuex 概述

1. Vuex 概念：
   • Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。
2. 使用 Vuex 统一管理状态的好处
   • 能够在 vuex 中集中管理共享数据，易于开发和后期维护
   • 能够高效地实现组件之间的数据共享，提高开发效率
   • 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步
3. 什么样的数据适合存储到 Vuex 中
   • 一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中私有数据，依旧存储在组件自身的 data 中即可

2. Vuex 的基本使用

1. 安装 vuex 依赖包

   npm i cuex -S
   

2. 导入 vuex 包

   import vuex from 'vuex'
   Vue.use(Vuex)
   

3. 创建 store 对象

   const store = new Vuex.Store({
     // state 中存放的就是全局共享的数据
     state: { count: 0 }
   })
   

4. 将 store 对象挂载到 vue 实例中

   new Vue({
     el: '#app',
     render: h => h(app)
     router,
     // 将创建的共享数据对象，挂载到 Vue 实例中
     // 所有的组件，就可以直接从 store 中获取全局的数据了
     store
   })
   

3. Vuex 的核心概念

1. 核心概念概述

• State
• Mutation
• Action
• Getter

2.State

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

// 创建 store 数据源，提供唯一的公共数据
const store = new Vuex.Store({
state: { count: 0 }
})

• 组件访问 State 中数据的第一种方式：

  this.$store.state.全局数据名称
  

• 组件访问 State 中数据的第二种方式：

  // 1. 从 vuex 种按需导入 mapState 函数
  import { mapState } from 'vuex'
  

  通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的computed 计算属性：

  // 2. 将全局数据，映射为当前组件的计算属性
  conputed: {
    ...mapState(['count'])
  }
  

3. Mutation(注意：不要在 mutations 函数中，执行异步操作)

• Mutation 用于变更 Store 中的数据

  1. 只能通过 mutation 变更更 Store中的数据，不可以直接操作 Store 中的数据。
  2. 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化
  3. 注意：只有 mutations 中定义的函数，才有权力修改 state 中的数据

• 触发 mutation 的第一种方式

// 定义 Mutation
// 只有 mutations 中定义的函数，才有权力修改 state 中的数据
const store = new Vuex.Store({
   state: {
     count: 0
   },
   mutations: {
     add(state) {
       // 变更状态
       state.count++
     }
   }
})

// 触发 mutation
methods: {
   handel() {
     // 触发 mutations 的第一种方式
     // commit 的作用就是 调用某个 mutation 函数
     this.$store.commit('add')
   }
}

注意：可以在触发 mutations 时传递参数：

mutations: {
   // 第一个参数 永远指向 state 节点下的数据
   // 第二个参数 用于接收传递过来的参数
   addN(state, step) {
     state.count += step
   }
}

methods: {
   btnHandler2() {
     // 调用 mutations中的 addN 方法，并且传递参数
     this.$store.commit('addN', 3)
   }
}

• 触发 mutation 的第二种方式

// 1. 从 vuex 中 按需导入 mapMutations 函数
import { mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：

methods: {
   ...mapMutations(['sub']),
   brnHandler2() {
     this.sub()
   }
}

如需传递参数：

methods: {
   ...mapMutations(['sub', 'subN']),
   btnHandler2() {
     this.subN(3)
   }
}

4. Action

• Action 用于处理异步任务。
• 如果异步操作变更数据，必须通过 Action， 而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式简介变更数据。

actions: {
   addAsync(context) {
     setTimeout(() => {
       // 在 ations 中，不能直接修改 state 中的数据；
       // 必须通过 context.commit() 触发某个 mutation 才行
       context.commit('add')
     }, 1000)
   }
}

触发 actions 的第一种方式：

btnHandler3() {
   // 这里的 dispatch 函数，专门来触发 action
   this.$store.dispatch('addAsync')
}

触发 actions 的第二种方式：

// 1.从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：

// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数
methods: {
...mapActions(['addAsync', 'addNAsync'])
}

注意：在触发 actions 时也可以传递参数，因为和 c触发mutations传参类似，所以这了就不再赘述

5. Getter

Getter用于对Store中的数据进行加工处理形成新的数据。

• Getter 可以对 Store 中已有的数据进行加工处理之后形成的新的数据，类似于 Vue 的计算属性
• Store 中的数据发生变化，Getter 的数据也会跟着发生变化。

getters: {
   showNum: state => `当前最新的数量是【${state.count}】``
}

使用 getters 的第一种方式

// this.$store.getters.名称
this.$store.getters.showNum

使用 getters 的第二种方式

import { mapGetters } from 'vuex'

computed: {
 	...mapGetters(['showNum'])
}

4. 基于Vuex 的案例

todos案例源码：传送门