篇三、组件通信（非父子组件间传值 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~