Vuex 入门到进阶

框架

浏览数:589

2019-7-7

先说一下Vuex到底是什么?

Vuex 是一个专门为 vue.js 应用程序开发的状态管理模式

  • 这个状态我们可以理解为在 data 中的属性,需要共享给其他组件使用的部分
  • 也就是说,我们需要共享的数据,可以使用 vuex 进行统一集中式的管理

喜欢看代码学习的的可直接下载下方 Demo

https://gitee.com/jiangliyue/…

Vuex中的五种基本对象

  • state:存储状态(变量)
  • getters:对数据获取之前的再次编译,可以理解为 state 的计算属性,我们在组件中使用 $store.getters.fun() 调用
  • mutations:修改状态,并且是同步的。在组件中使用 $store.commit(‘操作名’,params) 调用
  • actions:异步操作。在组件中使用 $store.dispatch(‘操作名’) 调用
  • modules:store 的子模块,为了开发大型项目,方便状态管理而使用的,使用方法和上面一样
// 常见vuex初始化配置
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        msg: 'hello ',
        username: ''
    },
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})

在项目中使用 Vuex

将上面初始化的 Vuex 对象引入到 main.js 文件中

// 引入store
import store from '@/store/index'
new Vue({
    store,
    render: h => h(App)
}).$mount('#app')

在组件中使用

<template>
  <div class="hello">
    <h3>{{$store.state.msg}}</h3>
  </div>
</template>

<script>
export default {
    name: 'home',
    created() {
        console.log(this.$store.state)
    }
}
</script>

现在我们已经可以使用 Vuex 中的 state 了,接下来我们看看如何操作这个属性

Vuex 提供了 mutations 和 actions 两种方法来操作 state

  • mutations(同步操作)

定义 mutations 对象里的方法,方法里面的参数,第一个默认为 state,第二个为自定义传入参数。

/**
 * mutations 里面放置的是我们操作state对象属性的方法
 */
const mutations = {
    setMsg(state, name) {
        state.msg = 'hellow' + name
    }
}
export default new Vuex.Store({
    state,
    mutations
})

组件中使用 Vuex 提供的 commit 方法调用 mutations 中我们自定义的方法

created() {
    this.setSayMsg('your Name')  
},
methods: {
    setSayMsg(name) {
      this.$store.commit('setMsg',name)
    }
}

效果如何大家自行实验哈~

  • actions(异步操作)

定义 actions 对象里的方法,方法里面的参数,第一个是context,它是一个和 store 对象具有相同对象属性的参数,第二个为自定义传入参数。

通常当我们需要修改多个状态或者说调用多个 mutations 里的方法时会用到 actions

/**
 * actions 里面放置的是我们调用store对象的方法
 */
const actions = {
    // 常规写法
    // actionsSetMsg(context, name) {
    //    context.commit('setMsg', name)
    // }
    // 简化写法
    actionsSetMsg({ commit }, name) {
        commit('setMsg', name)
    }
}
export default new Vuex.Store({
    state,
    actions
})

组件中使用 Vuex 提供的 dispatch 方法调用 actions 中我们自定义的方法

created() {
    this.actionsSetSayMsg('your Name')  
},
methods: {
    actionsSetSayMsg(name) {
        this.$store.dispatch('actionsSetMsg',name)
    }
}

最后是 getters,我们一般使用 getters 来获取我们的 state,因为它算是 state 的一个计算属性,相当于实时监听状态变化

定义 getters 对象里的方法

const getters = {
    getMsg(state) {
        return state.msg
    }
}
export default new Vuex.Store({
    state,
    getters
})

组件中使用

computed: {
    msg() {
        return this.$store.getters.getMsg
    }
}

看到这里如果上面的用法都能理解,那恭喜你的 Vuex 已经学的很好了!

接下来的是官方提供给我们使用 Vuex 的一些小技巧

  • mapState

  • mapMutations

  • mapActions

  • mapGetters

  1. 需要明确的是,这些方法只是方便我们书写,重点还是上面的基础部分
  2. 这部分用到了 es6 的扩展运算符,不熟悉的同学自行百度吧,还是蛮有用的

用法还是看下面代码直接点,主要记住2点

  • 引入都用到扩展运算符,即3个点 ‘…’ ,方式则为下面 2种模板任选一种
...mapState({
    你在该页面想用的变量名: '你state对象里定义的属性或方法名'
})
// 或者传入一个数组,此时当前组件调用的变量名与state中定义的方法名一致
...mapState(['你state对象里定义的属性或方法名'])
  • 另外记住 …mapState({…}) 和 …mapGetters({…}) 放在 computed 计算属性里, …mapMutations({…}) 和 …mapActions({…})放在methods 方法属性里就可以了

Demo

Git 地址

https://gitee.com/jiangliyue/…

<template>
    <div class="hello">
        <h1>Msg: {{ $store.state.msg }}</h1>
        <h1>Your Name: {{ username }}</h1>
        <h1>mapState Your Name: {{ mapStateName }}</h1>
        <h1>mapGetters Your Name: {{ mapGettersName }}</h1>
        <h1>User Name: <input type="text" v-model="name" /></h1>
        <h1>
            <button @click="save">保存用户名</button>
            <button @click="mapSave(name)">map 模式</button>
        </h1>
        <h1>
            <button @click="saveAndUpdate">保存用户名并更新语句</button>
            <button @click="mapSaveAndUpdate(name)">map 模式</button>
        </h1>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    name: 'HelloWorld',
    data() {
        return {
            name: ''
        }
    },
    computed: {
        username() {
            return this.$store.getters.getUserName
        },
        ...mapState({
            mapStateName: 'username'
        }),
        ...mapGetters({
            mapGettersName: 'getUserName'
        })
    },
    methods: {
        save() {
            // // 粗暴写法(不推荐,主要不利于维护)
            // this.$store.state.username = this.name

            // 同步写法 使用 commit 调用 mutations
            this.$store.commit('setUserName', this.name)
        },
        saveAndUpdate() {
            // 异步写法 使用 dispatch 调用 actions
            // 一般用于需要依次改变多个状态的流程
            this.$store.dispatch('saveAndUpdate', this.name)
        },
        // 使用 mapMutations, mapActions 来简化代码
        // 传入数组生成一个 this.setUserName(data) 的方法
        // ...mapMutations(['setUserName']),
        // 传入对象 可重新定义方法名 生成一个 this.mapSave(data) 的方法
        ...mapMutations({
            mapSave: 'setUserName'
        }),
        // 同理 actions 也可以传入数组一次性生成多个方法
        ...mapActions({
            mapSaveAndUpdate: 'saveAndUpdate'
        })
    }
}
</script>

最后,如果大家发现有什么问题,或者错误的地方,欢迎留言交流。

作者:没有梦想的咸鱼