Vue学习计划-Vue2--VueCLi（八）vuex统一状态管理实现数据共享

1. vuex是什么

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。这个怎么理解呢？可以暂时理解成全局事件总线、消息订阅与发布一样的道理，把vuex当成是外部的一个储存空间，内部储存着方法和状态。看一下图：

其中呢：
state：是一个对象，目的是保存具体的数据
actions对象，目的是响应组件中用户的动作，可以理解成里面储存的是方法，里面可以写同步方法也可以写异步方法
mutations对象，目的是修改state中的数据，是同步的

2. 什么时候使用vuex

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

3. 搭建环境

1. 创建文件: src/store/index.js

// 引入 Vue 核心库
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 引用 vuex
Vue.use(Vuex)

// 创建并暴露store
export default new Vuex.Store({
// 准备state对象 —— 保存具体的数据
state: {
    num: 0
},
// 准备actions对象 —— 响应组件中用户的动作
actions: {},
// 准备mutations对象 —— 修改state中的数据
mutations: {}
})

2. 在main.js中创建vm时传入store配置项

// 引入 store
import store from './store'
...
// 创建vm
new Vue({
   router,
   store,
   render: h => h(App)
}).$mount('#app')

4. 基本使用

1. 初始化数据、配置actions、配置mutations、操作文件store.js

// 引入 Vue 核心库
 import Vue from 'vue'
 // 引入vuex
 import Vuex from 'vuex'
 // 引用 vuex
 Vue.use(Vuex)

 // 创建并暴露store
 export default new Vuex.Store({
     // 初始化数据
     state: {
         num: 0
     },
     actions: {
         // 响应组件中加的动作
         jia (context, value) {
         // console.log('action中的jia被调用了‘，context, value)
         context.commit('JIA', value)
         }
     },
     mutations: {
         // 执行JIA
         JIA (state, value) {
         // console.log('mutations中的JIA被调用了', state, value)
         state.sum += value
         }
     }
 })

2. 组件中读取vuex中的数据:$store.state.sum
3. 组件中修改vuex中的数据:$store.dispatch('action中的方法名', 数据)或者$store.commit('mutations中的方法名', 数据)

5. getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工，类似于计算属性computed
2. 在store.js中追加getters配置

   getters: {
       bigSum (state) {
       return state.sum * 10
       }
   },

3. 在组件中读取数据: $store.getters.bigSum

6. 四个辅助函数map方法的使用

1. mapState方法：用于帮助我们映射state中的数据为计算属性

组件内，我们可以写作computed: mapState({sum: 'sum', school: 'school'})
但是由于组件内除了state的数据，我们可能还有其他计算属性，所以我们利用·ES6·语法进行解构，下方mapGetters同理

computed:{
   // 借助mapState生成计算属性，sum,school(对象写法)
    ...mapState({sum: 'sum', school: 'school'})
  // 借助mapState生成计算属性，sum,school(数组写法)
   ...mapState(['sum', 'school'])
}

3. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed:{
    // 借助mapGetters生成计算属性，bigSum(对象写法)
    ...mapGetters({bigSum: 'bigSum'})
    // 借助mapGetters生成计算属性，bigSum(数组写法)
    ...mapGetters(['bigSum'])
}

4. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    // 靠mapActions生成方法，bigSum(对象写法)
    ...mapActions({bigSum: 'bigSum'})
    // 靠mapActions生成方法，bigSum(数组写法)
    ...mapActions(['bigSum'])
}

5. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
    // 靠mapMutations生成方法，bigSum(对象写法)
    ...mapMutations({bigSum: 'bigSum'})
    // 靠mapMutations生成方法，bigSum(数组写法)
    ...mapMutations(['bigSum'])
}

一个不错的示例：准备父组件App.vue、vuex的store.js、子组件MySchool.vue、MyStuden.vue
1. App.vue中：引入一个动态组件的概念：

2. store.js文件中：

3. myschool.vue组件内：

4. MyStudent.vue组件：

疑问：对于上述不错的案例，我们能体会到vuex帮我们共享数据的方便，但上述案例还有个不足，是什么呢？

1. 学校状态数据和一些与学校无关的数据状态（count、price）都在一个state中设置
2. 假若学生的数据状态也需要共享,是不是也要放在state,``
3. 上述中目前只有一个action,若在有一个操作学生组件的方法呢？是不是也要放在action中呢？
4. mutations和getters同样的问题，那么针对这几个问题我们就形成了如下的形式：
   
   actions、mutations、getters同理，这就造成了混乱与臃肿，不利于开发和维护，所以我们最好将他们拆解为单独的模块，每一个模块控制数据自己模块的数据与方法，这就需要vuex的模块化

7. 模块化 + 命名空间（namespaced）

1. 目的： 让代码更好维护，让多种数据分类更加明确，模块独立，自己掌控自己的状态与方法
2. 修改store.js

const aboutModule = {
    namespaced: true, // 开启命名空间
    state: {...},
    mutations: {...},
    actions: {...},
    getters: {...}
},
 const userModule = {
    namespaced: true, // 开启命名空间
    state: {...},
    mutations: {...},
    actions: {...},
    getters: {...}
},
const store = new Vuex.Store({
    modules: {
       aboutModule,
       userModule 
    }
})

3. 开启命名空间后，组件中读取state数据：

// 方式一：直接自己读取
this.$store.state.aboutModule.list
// 方式二：借助`mapState`读取
...mapState('aboutModule',['list', 'name'])

4. 开启命名空间后，组件中读取getters数据：

// 方式一：直接自己读取
this.$store.getters['aboutModule/list']
// 方式二：借助`mapGetters`读取
...mapGetters('aboutModule',['list', 'name'])

5. 开启命名空间后，组件中调用dispatch：

// 方式一：直接自己读取
this.$store.dispatch('aboutModule/getList', params)
// 方式二：借助`mapActions`读取
...mapActions('aboutModule',{getList, getData})

6. 开启命名空间后，组件中调用commit：

// 方式一：直接自己读取
this.$store.commit('aboutModule/getList', params)
// 方式二：借助`mapMutations`读取
...mapMutations('aboutModule',{getList, getData})