很多刚学习vue的人对于全局变量管理工具vuex都觉得很神秘,今天就用很通俗的大白话协助大家理解一下vuex,作者的vue项目使用vue脚手架搭建的,用脚手架搭建的项目会在src文件夹下有一个store文件,打开store文件,会看到里边有index.js,getters.js,actions.js这几个js文件(如果没有的话就自己建一下)。那么vuex的核心就在这几个文件当中,其实vuex最核心的就四部分:state(全局变量),mutations(修改全局变量的方法),actions(用于提交mutations的方法),getters(其他vue组件读取state变量的中间变量,作者理解,该处相当于导出了state)。接下来开始上代码进行分析。

store.js文件中代码

该部分代码定义了全局变量state,并在mutations中定义了修改state的方法

import Vue from 'vue'  // 首先导入vue
import Vuex from 'vuex'  // 导入vuex
import * as actions from './actions'  // 将actions方法导入
import * as getters from './getters'  // 将getters导入

Vue.use(Vuex)
// 变量初始化
const state = {
    count: 10
}
// 定义 mutations(即对变量state进行的操作)
const mutations = {
    INCREMENT(state, canshu) {
        state.count++
    },
    DECREMENT(state) {
        state.count--
    }
}

// 创建 store 实例(先不着急看该部分代码,该部分就是将全局变量,mutations,actions,getters整体变成一体化的实例)
export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations
})

actions.js中的代码

之所以用actions去提交mutations,应该是为了是的mutations中的方法可以异步操作(mutations中方法为同步执行,该处可能会迷惑,但是其实就是用actions中的方法去调用mutations中的方法而已)。

// 用于提交mutations中的INCREMENT方法(可根据自己的需要进行传参,对应的mutaitons中要接收参数)
export const increment = ({commit}) => {
    commit('INCREMENT', canshu)
}
// 用于提交mutations中的DECREMENT方法
export const decrement = ({commit}) => {
    commit('DECREMENT')
}

getters.js中的代码

一般getters中的代码比较简单,主要就将全局变量简单封装并导出,方便其他组件的调用。

// 该处将全局变量state下的count导出,是的其他vue组件都可以获取,进行修改
export const getCount = state => {
    return state.count
}

上面对vuex的几个组成部分进行了基本的了解,要使得整个项目使用vuex进行全局变量管理,要在main.js中引入vuex,并使用

在main.js中引入vuex(该部分引入在store.js添加也可)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

至此,项目已经引用了vuex,接下来告诉大家如何在组件中引入

假如我们要在一个名为test.vue的组件中,对全局变量state.count进行修改

<script>
    import { mapGetters } from 'vuex'
    import { mapActions } from 'vuex'
    export default {
        computed: {
            // 使用对象展开运算符将 getters 混入 computed 对象中
            ...mapGetters(['getCount'])
        },
        methods: {
            ...mapActions([
                'increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
                'decrement'
            ]),
            test: function() {
            	this.increment(1)  // 该处即可向调用当前页面的其他方法一样进行调用actions中的方法
            	console.log(this.getCount)  // 同理,也可以像调用本地data值的方式调用全局变量
            }
        }
    }
</script>

如果有疑问,请留言(该示例代码为github项目中代码,仅用于方便大家理解)。

Logo

前往低代码交流专区

更多推荐