篇三、组件通信（非父子组件间传值 Vuex ~ 状态管理）

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~

篇三、组件通信（非父子组件间传值 Vuex ~ 状态管理）

猜你喜欢