vue中vuex的详解

灰太狼 2021-09-19 02:20 479阅读 0赞

## 概念 ##

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

## 安装 ##

1.  HTML 中使用 script 标签引入

1.  Vue项目中使用 npm 下载安装（需要安装 Node 环境）

// 下载
    npm install vuex --save
    
    // 安装
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)

## Vuex 图示 ##

![20190425151428535.png][]

**Vuex 和单纯的全局对象有以下两点不同：**

1.  Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.  不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

**Store**  
    每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

**State**  
    驱动应用的数据源，用于保存所有组件的公共数据.。

**Getter**  
    可以将 getter 理解为 store 的计算属性, getters 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

**Mutation**  
    mutations 对象中保存着更改数据的回调函数,该函数名官方规定叫 type, 第一个参数是 state, 第二参数是payload, 也就是自定义的参数。mutation 必须是同步函数。mutations 对象里的方法需要使用 store.commit 调用

**Action**  
    Action 提交的是 mutation 而不是直接变更状态。action 可以包含任意异步操作。actions 对象里的方法需要使用 store.dispatch 调用。  
    Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

**Module**  
    由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

## HTML中 vuex 的使用 ##

<body>
    <div id="app">
        <input type="button" value="+" @click="add">
        { { this.$store.state.count}}
        <input type="button" value="-" @click="reduce">
        { { this.$store.getters.synchro}}
        <input type="button" value="改变为10" @click="changeNum">
    </div>
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
    <script>
        var store = new Vuex.Store({ 
            state: { 
                count: 0
            },
            getters: { 
                synchro(state) { 
                    return state.count
                }
            },
            mutations: {    
                increment(state) { 
                    state.count++
                },
                inreduce(state) { 
                    state.count--
                },
                inchange(state, num) { 
                    state.count = num
                }
            },
            actions: { 
                change(context, num) { 
                    context.commit('inchange', num)
                }
            }
        })
    
        new Vue({ 
            el: '#app',
            store,
            methods: { 
                add() { 
                    this.$store.commit('increment')
                },
                reduce() { 
                    this.$store.commit('inreduce')
                },
                changeNum() { 
                    this.$store.dispatch('change', 10)
                }
            }
        })
    </script>
    </body>

## Vue 项目中 vuex 的使用（两种） ##

1.  把 vuex 写在 main.js 文件里

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import Vuex from 'vuex'
    
    // 全局状态管理
    Vue.use(Vuex)
    
    Vue.config.productionTip = false
    
    var store = new Vuex.Store({ 
      state: { 
        num: 0
      },
      mutations: { 
        changeNum(state, num){ 
          state.num += num
        }
      }
    })
    
    new Vue({ 
      el: '#app',
      store,
      router,
      components: {  App },
      template: '<App/>'
    })

在组件中调用

<template>
    	<div>
    		<input type="button" value="改变count的值" @click="change">
        	{ { this.$store.state.count}}
    	<div>
    </template>
    <script>
    export default { 
    	name: '',
    	data () { 
        	return { 
    		}
        },
        methods: { 
    		change() { 
    			this.$store.commit('changeNum', 10)
    		}
    	}
    }
    </script>

1.  把 vuex 分离出来

在 src 目录下创建一个 vuex 目录，新建 modules 目录 和 index.js 文件 放到 vuex 目录下  
![20190425180409866.jpg][]

在 main.js 文件里引入 vuex 目录

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './vuex'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      store,
      router,
      components: {  App },
      template: '<App/>'
    })

在 index.js 里写上如下代码

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    let modules = { }
    
    const requireAllModules = require.context("./", true, /\.js$/)
    
    requireAllModules.keys().forEach(key => { 
      let module = requireAllModules(key).default
      if (module && module.name && module.namespaced) { 
        modules[module.name] = module
      }
    })
    
    export default new Vuex.Store({ 
      modules: modules,
      strict: process.env.NODE_ENV !== "production"
    })

在 modules 目录下 新建 city.js 文件，里面代码如下

export default { 
      name: "city",
      namespaced: true,
      state: { 
        cityName: '',
        cityCode: ''
      },
      getters: { 
        getState(state) { 
          return state
        },
        getCityCode(state) { 
          return state.cityCode
        }
      },
      mutations: { 
        changeCity(state, cityName) { 
          state.cityName = cityName
        }
      }
    }

在组件里设置值

<template>
    	<div>
    		<ul>
              <li v-for="item in city" @click="handChangeCity(item.name)"></li>
            </ul>
    	</div>
    </template>
    <script>
    import {  mapMutations } from 'vuex'   // 引入vuex
    export default { 
    	name: "city",
    	data() { 
    		return { 
    			city: [
    				{  id: 1, name: '北京' }
    				{  id: 2, name: '上海' }
    				{  id: 3, name: '广州' }
    				{  id: 4, name: '深圳' }
    				{  id: 5, name: '厦门' }
    			]
    		}
    	},
    	methods: { 
    		// 修改
    		...mapMutations({ 
    			changeCity: "city/changeCity"
    		}),
    		// 第一种写法
    		handChangeCity(cityName) { 
    			this.changeCity(cityName)
    		}
    		// 第二种写法 不需要使用 ...mapMutations
    		handChangeCity(cityName) { 
    			this.$store.commit('city/changeCity', cityName);
    		}
    	}
    }
    </script>

在另一个组件里使用

<template>
    	<div>
    		<div>{ { getState.cityName}}</div>
    		<div>{ { getCityCode}}</div>
    	</div>
    </template>
    <script>
    import {  mapGetters} from 'vuex'   // 引入vuex
    export default { 
    	data() { 
    		return { 
    		}
    	},
    	computed: { 
    	    // 第一种使用方法
    	    ...mapGetters({ 
    	    	getState: "city/getState"
    	    })
    	    // 第二种使用方法
    	    ...mapGetters('city', ['getState', 'getCityCode'])
      	}
    }
    </script>

[20190425151428535.png]: /images/20210812/ac66838b1f1d4454a58860af22432370.png
[20190425180409866.jpg]: /images/20210812/252eace3449b41b6ae636656e7856237.png