Vuex 学习笔记

1.1 vuex的核心概念

  1. State (驱动应用的数据源)
  2. Mutation (以声明方式将 state 映射到视图)
  3. Action(响应在 view 上的用户输入导致的状态变化)
  4. Getter (对 Store 中的数据进行加工处理形成新的数据)

1.1.1 Start

start 提供唯一的公共数据源,所以共享的数据要统一放到Store 的 Stare 中进行存储。

// 创建 store 数据源, 提供唯一公共数据 const store = new Vuex.store({     state: {         name : 'code'     } })

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

this.$store.state.name // code

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

// 1. 从vuex 中按需导入 mapstate 函数 import {mapstate} from 'vuex'  // 通过刚才导入的 mapstate  函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性  // 2. 将全局数据,映射为当前组件的计算属性 computed: {     ...mapstate(['name']) }

1.1.2 Mutation

Mutation 用于变更store中的数据

1 只能通过 mutation 变更 Store 数据, 不可以直接操作 State中的数据。

2 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化

// 定义 Mutation const store = new Vuex.Store({     state: {         name: 'code'     },     mutations:{           // 不带参 修改         changeName(state){             state.name = 'Vuex'         },         // 带参 修改         changeNameParameter(state, newName){             state.name = newName         }     } }) // 触发 Mutation 的 第一种方式 methods: {     commitMuation () {         // 不带参         this.$store.commit('changeName')         // 带参       	this.$store.commit('changeNameParameter', 'Vuex')     } } // 触发 Mutation 的 第二种方式 // 1.从vuex中按需导入 mapMutations函数 import { mapMutations } from 'vuex' methods: {     // 2.讲指定的 mutations 函数,映射为当前组件的methods 函数     ...mapMutations(['changeName','changeNameParameter'])       commitMuation () {         // 不带参         this.changeName()         // 带参         this.changeNameParameter('vuex')     } }

1.1.3 Action

Action 用于 处理异步任务

如果通过异步操作变更数据 (例如定时器,三秒后数据变更), 必须通过 Action, 而不能使用Mutation,但是在 Action中 还是要通过触发 Mutation 的方式间接变更数据。

// 定义Action const store = new Vuex.store({     // ...省略其他代码     mutations: {         changeName(state) {             state.name = 'vuex'         }     },     actions: {         // 不带参         changeNameAsync(context){             setTimeout(() => {                 context.commit('changeName')             },1000)         },         // 带参         changeNameParameterAsync(context, step) {             setTimeout(() => {                 context.commit('changeName', step)             }, 1000)         }     } }) // 触发 Action  // 触发 actions 的 第一种方式 methods: {     asyncChangeName() {         this.$store.dispatch('changeNameAsync')     } }  // 触发 actions 的 第二种方式  // 1.从vuex中按需导入 mapActions 函数 import { mapActions } from 'vuex' methods: {     // 将需要的 actions 函数, 映射为当前组件的 methods 方法     ...mapActions(['changeNameParameterAsync'])     asyncChangeNameParameter() {         this.changeNameParameterAsync('asyncvuex')     } }

1.1.4 Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据,类似于Vue 的计算属性(computed)

Store 中的数据发生变化,Getter的数据也会发生变化

// 定义 Getter const store = new Vuex.Store({     state: {         name: 'vuex'     },     // mutations     // actions     getters: {         beautifulName: state => {             return '这是我的新名字' + state.name + '好看不?'         }     } }) // 触发Getter // 使用getters的第一种方式 this.$store.getters.beautifulName // 使用getters的第二种方式 import { mapGetter } from 'vuex'  computed: {     ...mapGetters(['beautifulName']) }

小结:

Vuex 可以帮助我们管理共享状态。如果不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。

您可能还会对下面的文章感兴趣: