Vuex-入门到进阶

先说一下 Vuex 到底是什么？

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

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

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

https://gitee.com/jiangliyue/…

<br/>

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: {}})

<br/>

在项目中使用 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>

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