Vuex用法

  • vuex主要使用场景为大型单页面应用,更适合多人协同开发。
  • vuex写法多种,在此只写两种自认为最常用方案。

步骤一:vuex安装、全局引入

  • 利用npm包管理工具安装,命令行如下(注:在开发环境中安装vuex时,需要加--save):
npm install vuex --save

步骤二:vue-cli中使用vuex的方式

为了后续维护,在src文件夹中新建一个store文件夹,然后在改文件夹中新建如下文件,具体如下:
这里写图片描述

  • state.js文件示例:
    这里写图片描述

  • getters.js文件示例(使用getters来获取state的状态,即获取state.js中数据):
    这里写图片描述
**注:**
selectOrder: state => state.selectOrder 
//相当于  
selectOrder(state) {
    return  state.selectOrder
}

  • mutation-type.js示例(所有mutations.js中函数名放在这里):
    这里写图片描述

  • mutations.js示例:
    这里写图片描述

  • actions.js示例(异步操作、多个commit时):
    -示例1
    这里写图片描述

-示例2
这里写图片描述


  • index.js示例(组装vuex):
    这里写图片描述

  • 最后将store实例挂载到main.js里面的vue上去就行了
    这里写图片描述

  • modules示例说明(如果不是很复杂的应用,一般不用分模块的,如下):

-示例1

export default {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
}

-示例2
这里写图片描述



  • mapGetters、mapActions、mapMutations,然后通过methods和computed的方式去调用这些变量或函数,如下:
import {mapGetters, mapMutations, mapActions} from 'vuex'

/*****/
export default {
    computed: {
        ...mapGetters([
            name,
            age
        ])
    },
    methods: {
        ...mapMutations({
            setName: 'SET_NAME',
            setAge: 'SET_AGE'
        }),
        ...mapActions([
            nameAsyn
        ])
    }
}

  • 组件中数据提交
    这里写图片描述

  • 组件中获取vuex中数据(使用,例如 this.currentArea.id )
    这里写图片描述

~end~

Logo

前往低代码交流专区

更多推荐