Vuex-超简单详细使用手册

之前在项目用到过Vuex,但用的时候都是前辈写好的结构，知其然而不知所以然，看了几篇博客以及官网的内容打算小小的整理一下，首先来抛玉引砖，推荐几个我觉得通俗易懂的博客：

未将状态使用Modules进行表达的：https://blog.csdn.net/u011068996/article/details/80216154

使用Modules进行表达的：https://segmentfault.com/a/1190000009404727

当然官网也很重要，虽然没有中文的但是可以翻译成中文页面（中英对照着看不然理解会有偏差）：https://vuex.vuejs.org/

（以下实际例子以vue-cli为背景进行）

Vuex（作用就是全局变量状态管理）

（1）什么都不说这个是真的重要：

（2）与全局变量的区别

vuex的state状态可以理解为响应式的双向改变；其次，其状态必须通过提交mutations进行改变

Vuex基本知识点指南（基本官网前几节）

注意：

.getters的第三个参数rootState,可进行跨模块调用state;
.state 是会根据组合时模块的别名来添加层级的【归于根state】,后面的 getters,mutations ,actions 都是合并在 store 下
.getters不可重名，重名报错；mutations与actions可重名，且重名访问时按照模块引入顺序依次触发

Vuex非模块使用实战

安装：npm install vuex --save

main.js中引入

src下建立store文件夹并建立index.js,内容如下：

组件中的访问（非map方式）

Vuex模块使用实战

1.安装【同上】

2.main.js中引入【同上】

3.src下store目录结构

各个文件内容：

4.组件访问（map方式演示）：

map方式知识点：

篇文章，内容比较多，建议收藏！

官方解释：Vuex 是专为 vue.js 应用程序开发的状态管理模式。

一、Vuex 是做什么呢？

什么是状态管理？

简单地讲：可以把多个组件都需要的变量全部存储到一个对象里面，然后这个对象放在顶层的 vue 实例中，让其他组件可以使用。这样多个组件就可以共享这个对象中的所有属性。

有些同学想着，这么简单我们自己在vue顶层定义一个对象不就可以实现共享了？我们发现虽然数据可以获取到，但是如果在某个组件内，数据改变了，那我们如何修改数据，让此数据在其他组件内保持最新呢？

我们的vuex就是为了提供一个在多个组件间共享状态的插件，而且能够实现实时响应。

二、Vuex 使用

vuex 是管理组件之间通信的一个插件，所以使用之前必须安装。

2.1、安装

1》使用 script 方式引入

<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

2》使用包管理

npm install vuex --save //yarn add vuex

注意：vuex 必须依赖 vue 使用

2.2、搭建 store 实例

创建一个 store 文件夹，新建 index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);//使用vuex

export default new Vuex.Store({
	state:{},
  mutations:{},
  getters:{},
  actions:{},
  modules:{}
})

在 main.js 处，挂载 store

import store from './store'

new Vue({
 router,
 render: h=>h(App)
})

//相当于
// Vue.prototype.$store=store

2.3、使用状态

// store 中定义状态
state:{
	statue: '在线'
}

//在组件内使用
<div>组件内数据：{{ $store.state.status }} </div>
//在 js 中使用
mounted(){
	console.log( this.$store.state.status )
}

三、Vuex 的五大核心

3.1、state

state 存放 vuex 的基本数据，用来存储变量的。

单一状态树

Vuex 使用单一状态树，即用一个对象就包含了全部的状态数据。state 作为构造器选项，定义了所有我们需要的基本状态参数。

在组件中引用 state 数据方式：

1》通过 vue 的 computed 获取 vuex 的 state

export default new Vuex.Store({
 state:{
  online:true
 }
})


computed:{
 status(){
  return this.$store.state.online
 }
}

store 中的数据发生改变时，都会重新求取计算属性，并更新相关 DOM。

2》如果需要使用多个参数时，都使用 computed 计算属性，就会使代码变的有些冗余和复杂，此时我们就可以借助 mapState 辅助函数。

//state 中数据比较多，引用到一个组件内
export default new Vuex.Store({
 state:{
  online:true,
   per:[
    {name:'qq',age:18}
   ],
  role:'管理员'
 }
})

//组件内
import { mapState } from 'vuex'

export default {
  name: 'App',
  computed: mapState({
   online: state=> state.online,
    per: 'per', // 'per'就相当于 state.per
    role: 'role' // 'role'就相当于 state.role
  })
}

vuex 使用单一状态树来管理应用层级的全部状态，单一状态树能够让我们最直接的方式找到某个状态的片段，而且之后的维护和调试过程，也可以非常方便管理和维护。

3.2、getters

从 store 中获取一些 state 变异后的状态。

使用的时候一般有两种方式：

1》返回的结果只依赖于 state 中的数据

export default new Vuex.Store({
 state:{
  count:2,
 },
 getters:{
   //返回 count 的 2 倍数据
  countDouble(state){
   return state.count*2
  }
 }
})

//组件中引用
<div> 获取countDouble：{{ $store.getters.countDouble }} </div>
//运行结果
获取countDouble：4

此处，$store.getters.countDouble 的使用与上边的 $store.state.count 是一样的。

2》getters 中返回的变异结果，依赖于某个 getters 中属性返回结果

export default new Vuex.Store({
 state:{
  count:2,
 },
 getters:{
   //返回 count 的 2 倍数据
  countDouble( state ){
   return state.count * 2
  }
   //返回 countDouble 的 2 倍数据
   countDoubleT( state , getters ){
    return getters.countDouble * 2
   }
 }
})

//组件中引用
<div> 获取countDouble：{{ $store.getters.countDoubleT }} </div>
//运行结果
获取countDouble：8

3.3、mutations

vuex 的store 状态的更新唯一方式：提交 Mutation。

Mutations 主要包括两部分：

字符串的事件类型
一个回调函数，该回调函数的第一个参数就是 state。

1》、mutation 中的方法通过 commit 调用，不传参数使用：

export default new Vuex.Store({
 state:{
  count:2,
 },
 mutations:{
  incrs(state){
   // count 加 1 
   state.count++
  }
 }
})

//组件调用

<button @click=" $store.commit('incrs') " >+</button>
{{$store.state.count}}

按钮每点一次，count 就会自加一次。

2》mutations 传递参数

我们点击加按钮时，指定每次点击增加的数值，如下：

export default new Vuex.Store({
 state:{
  count:2,
 },
 mutations:{
  addNum( state,n ){
   // count 加 1 
   state.count +=n
  }
 }
})

//组件调用

<button @click=" $store.addNum( 'incrs' , 5 ) " >+</button>
{{$store.state.count}}

//运行结果
每点一次按钮，count 增加 5

上个实例传递的是一个参数，如果我们需要传递多个参数时，该如何实现呢？

3》mutations 传递多个参数

export default new Vuex.Store({
 state:{
  count:2,
 },
 mutations:{
  addNum(state,payload){
    // payload 是传递过来的参数对象
    state.count +=payload.count
  }
 }
})

//组件调用

<button @click="addTen" >加10</button>
{{$store.state.count}}
export default{
methods:{
 addTen(){
  this.$store.commit({
    type:'addNum',
     count:10,
   		...//可以传任意多个参数
    })
  }
 }
}
//运行结果
每点一次按钮，count 增加 10

上述方法是 mutations 特殊的提交封装。包含了 type 属性的对象，将整个 commit 的对象作为 payload 使用。

3.4、actions

mutations 提交更新数据的方法，必须是同步的，如果是异步使用就会出现问题，然后在项目开发中往往就会用到异步更新，比如网路请求数据。

actions 是类似于 mutation，功能大致相同，但是 actions 是用来替代 mutations 进行异步操作的。

1》actions 的基本使用

actions:{
 aUpdateCount(context){
  setTimeout(()=>{ //使用定时器模拟异步操作
   context.commit('updateCount')
  },2000)
 }
},
mutations:{
 updateCount(state){
  state.count=5201314
 },
}

// 组件内使用
{{$store.state.count}}
<button @click="$store.dispatch('aUpdateCount')">异步更新count</button>

//运行结果
点击按钮，两秒后更新 count 值为5201314

值得注意的是，使用 actions 异步更新数据的时候，还是需要经过 mutations 中的方法，state 中的数据只能由 mutations 中的方法修改。

调用 mutations 中的方法，使用 commit 调用。

调用 actions 中的方法，使用 dispatch 调用。

2》异步更新的时候，也可以带参数

// 功能：点击按钮，指定 count 修改的值
actions:{
 aUpdateCount( context, payload ){
  setTimeout(()=>{ //使用定时器模拟异步操作
   context.commit( 'updateCount' , payload )
  },2000)
 }
},
mutations:{
 updateCount( state , payload ){
  state.count=payload
 },
}

// 组件内使用
{{$store.state.count}}
<button @click="$store.dispatch( 'aUpdateCount', '我爱前端' )">异步更新count</button>

//运行结果
点击按钮，两秒后更新 count 值为: 我爱前端

3》传入异步参数

actions:{
 //传入promise
 updateData(context,payload){
  return new Promise((resolve,reject)=>{
   setTimeout(()=>{
    resolve('我学会了')
   },2000)
  })
 },
}

//组件内调用
<button @click="ok">promise执行成功，返回"我学会了"</button>
methods:{
 ok(){
  this.$store.dispatch('updateData').then((res)=>{
   console.log(res)
  })
 },
}

//运行结果
点击按钮，两秒后打印：我学会了

3.5、modules

modules 是模块的意思，vue 使用单一状态树，项目越来越大，store 中的数据越来越多，不便于数据的管理和维护，代码也会变得臃肿。因此使用 modules ，把数据划分到对应的某个模块，既便于开发，也提高代码的可读性。

1》modules 简单使用

import Vue from 'vue'
import Vuex from 'vuex'
import { Increase } from './mutation_type.js'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  actions: {},
  getters: { },
  mutations: { },
  modules:{
    a:{
      state:{},
      getters:{},
      mutations:{},
      actions:{}
    },
    b:{
      state:{},
      getters:{},
      mutations:{},
      actions:{}
    }
  },
})

//也可以整理为
const moduleA={
  state:{},
  getters:{},
  mutations:{},
  actions:{}
}
const moduleB={
  state:{},
  getters:{},
  mutations:{},
  actions:{}
}
Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  actions: {},
  getters: { },
  mutations: { },
  modules:{
    a: moduleA,
    b: moduleB
  },
})

2》模块中的数据如何使用呢？

const moduleA={
  state:{
    aName:'我是模块a的数据'
  },
  getters:{},
  mutations:{},
  actions:{}
}

// 组件内引用
{{ $store.state.a.aName }}

3》调用模块内的 mutations 中的方法，如何调用呢？

$store.commit('aChangeName')

调取模块内的 mutations 中的方法，与之前是一模一样的，程序会先从第一层 store 中查找方法，找不到方法时会继续去模块中查找。

4》调用模块内的 getters 内方法

$store.getters.getName

需要注意的是，getters 中方法都是对 state 中数据变异，如果模块的 getters 方法需要根 store 中的 state 呢？

getName(state，getters , rootState){
  // state 表示当前模块的 state
  // getters表示当前模块的getters
  //rootState 表示根 store 内的state
}

5》模块内的 actions 中的方法，使用 commit 调用 mutations 中方法时，只能调用本模块内的 mutations 方法，不能调用外层的。

四、Vuex 数据响应原理

Vuex 的 store 中的 state 是响应式的，当 state 中数据发生改变时，vue 组件会自动更新。这就要求我们必须遵守一些vuex对应的规则：

提前在 store 中初始化好所需的属性。

说人话，就是必须在state中定义的属性才能做到响应式，如果是后加或删除的，无法做到响应式。

举个栗子：

mutations:{
 changeName(state){
  state.info.name='爱学习的前端人'
 },
 addAdrs(state){
  state.info['address']="陕西西安"
 },
}
      
{{this.$store.state.info}}
<button @click="$store.commit('changeName')">修改姓名</button>
<button @click="$store.commit('addAdrs')">增加地址</button>

此时点击修改姓名的时候，可以做到响应式，而点击“增加地址”按钮时，页面没有任何反应，但是在开发者模式中可以看到数据有变化。

我们要响应式，该如何实现呢？

addAdrs(state){
 
  state.info['address']="陕西西安"
  
  //修改为：
  Vue.set(state.info,'address','陕西西安')  
  
 },

同样的如果要删除 age 属性时，使用 delete 也做不到响应式，需要修改为 Vue.delete。

实例：响应式删除 age 属性

deleteAge(state){
  
 //delete state.info.age
  
 //修改为 	
 Vue.delete(state.info,'age')
},
 
//组件内容
{{this.$store.state.info}}
<button @click="$store.commit('deleteAge')">删除年龄</button>

五、类型常量

在 mutation 中定义很多事件类型，也就是方法名。当项目越来越大时，Vuex 管理的状态越来越多，需要更新状态的情况越来越多，那么意为着 Mutations 中的方法名越来越多，方法过多时，使用的时候需要花费大量精力去记住或来回切换文件找方法名，这样很容易出错，所以推荐大家使用一个常量，即使方法名出错了，也会将错就错，程序并不会发生异常。

如：

// 新建 mutation_type.js 文件
//导出一个常量
export const Increase='increase'

// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import { Increase } from './mutation_type.js'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    count:2,
  },
  mutations:{
    [Increase](state){
      state.count++
    },
  }
})

//组件内容
{{ $store.state.count }}
<button @click="add">加10</button> 
import { Increase } from './store/mutation_type'
sxport default{
	methods:{
   add(){
   	this.$store.commit(Increase)
   }
  }
}

使用的时候，只需要记住 Increase 或者在 mutation_type.js 文件内查找就好了。

好了小编今天的文章就到此结束了，喜欢我的可以点个关注哦！

源：https://www.cnblogs.com/maoqian/p/15428820.html

一、什么是Vuex？

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

简单点来说（说人话），就是实现任意组件中通信，并可以检测数据的变化。

二、Vuex原理

Vuex是集中于MVC模式中的Model层，规定所有的数据操作必须通过 action - mutation - state 的流程来进行，再结合Vue的数据视图v-moder等双向绑定特性来实现页面的展示更新。

下面看一张图来了解全过程。

简述主要方法详情：

Vue Components：Vue组件。展示页面，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
dispatch：操作行为触发方法。是唯一能执行action的方法。
actions：操作行为处理模块。处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
mutations：状态改变操作方法。是Vuex修改state的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

总的一句话简述就是：

Vue组件接收交互行为，调用dispatch方法触发action相关处理，若页面状态需要改变，则调用commit方法提交mutation修改state，通过getters获取到state新值，响应数据或状态给Vue 组件，界面随之更新。

三、Vuex的使用

1.安装

npm install vuex --save

2.新建一个文件夹store，创建inde.js

随便叫啥，随便建不建立文件夹。为了规范。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//准备actions---用于响应组件中的动作
const actions={
}
//准备mutations---用于操作数据（state）
const mutations={    
}
//准备state---相当于data，用于存储数据
const state={
    
}
//实例化创建并导出store
export default new Vuex.Store({
    namespaced: true,//解决模块命名冲突
    actions,
    mutations,
    state,
})

注意：

我们在这一步创建index.js文件的时候导入并引用Vuex，因为我们要实例化Vuex对象。如果在main引入，会导致在main.js导入store的时候报错。

3.在main.js中引入上一步的index.js，并在实例化 Vue对象时加入 store 对象 :

import store from './store/index' //引入写好的store
.....

new Vue({
 el: '#app',
 router,
 store,//使用store
 template: '',
 components: { App }
})

ok,环境搭好，开始操作。

4.简单使用：

先来一点简单的存放数据，取出查看。在一系列操作之后我们的VM（View Model）和VC（View component）身上都已经都有store这个数据源对象。所以我们可以从store身上使用this.$store.state.xxx获取数据。

在index.js中准备数据

const state={
    name:'浪漫主义码农',
    age:18,
}

在组件中获取数据

<template>
  <div>
    我放在store中的数据是 {{this.$store.state.name}}, {{this.$store.state.age}}
  </div>
</template>

5.mutation、anction

在知道每一个vm和vc身上都有store就可以好好操作了。

mutation--更改store中状态的唯一方法

根据上面的原理图，我们能知道vuex中规定只能通过提交mutation的方式去更改store中的状态，包括action中的操作，也是通过提交mutation去修改。另外一点就是vuex中规定mutation中不能包含异步操作

我们来修改上面的name、age属性。

const mutations={
    modify_age(state) {//不带参数修改age属性,state是默认的参数
        state.name="张三";
        state.age=20;
    },
    modify_age2(state,payload) {//带参数修改，payload是传入的对象,官网叫载荷（payload）
        state.name=payload.name;
        state.age=payload.age;
    }
}

在组件中，我们要使用this.$store.commit('xxx(方法名)', 参数;

参数可以是对象也可以是单一属性

<template>
  <div>
    我放在store中的数据是 {{ this.$store.state.name }},
    {{ this.$store.state.age }}
    <button @click="setDefault">不带参修改</button>
    <button @click="setparameter">带参修改</button>
  </div>
</template>

<script>
export default {
  methods: {
    setDefault() {
      this.$store.commit("modify_age");
    },
    setparameter() {
    this.$store.commit("modify_age2",{name:"王五",age:100});//载荷形式，传入可以使对象或者单个属性
      // this.$store.commit({//对象形式，传入可以使对象或者单个属性
      //   type: "modify_age2",
      //   name: "王五",
      //   age: 100,
      // });
      });
    },
  },
};
</script>

anction--同步/异步更改状态

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

后台API请求在这个模块进行请求。所有的操作最后都要到达mutation进行操作，更改state的状态。

还是上面一个例子，异步修改state的属性

先上代码

const actions={
    asy_modify (context) {//无参
        setTimeout(()=> {//异步操作
            context.commit("modify_age")
        }, 2000);
      },
      asy_modify2 (context,plyload) {//有参
        setTimeout(()=> {
            context.commit("modify_age2",plyload);
        }, 2000);
      }
}
const mutations={
    modify_age(state) {//不带参数修改age属性,state是默认的参数
        state.name="张三";
        state.age=20;
    },
    modify_age2(state,payload) {//带参数修改，payload是传入的对象,官网叫载荷（payload）
        state.name=payload.name;
        state.age=payload.age;
    }
}
const state={
    name: '浪漫主义码农',
    age: 18,
}

在组件中使用this.$store.dispatch('xxx')

<template>
  <div>
    我放在store中的数据是 {{ this.$store.state.name }},
    {{ this.$store.state.age }}
    <button @click="setDefault">不带参修改</button>
    <button @click="setparameter">带参修改</button>
  </div>
</template>

<script>
export default {
  methods: {
    setDefault() {
      this.$store.dispatch("asy_modify");
    },
    setparameter() {
      this.$store.dispatch("asy_modify2",{name:"王五",age:100});//载荷形式，传入可以使对象或者单个属性
      // this.$store.dispatch({//对象形式，传入可以使对象或者单个属性
      //   type: "asy_modify2",
      //   name: "王五",
      //   age: 100,
      // });
    },
  },
};
</script>

注意观察时间，2s后变化。

分析一波：

Action 里面的函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
action事件的触发同样可以使用载荷和对象两种方式

6. getter

getter，我们可以理解为是对store中state的一些派生状态，也可以理解为一种计算属性，它类似于计算属性一样，返回值会根据它的依赖被缓存起来，且依赖对象发生改变的时候它才会被重新计算。

getter属性相当于很多个组件需要对数据进行一样的处理，可以理解为公共的计算属性。

这样就很清晰了

Getter 接受 state 作为其第一个参数，也可以使用箭头函数。

const getters={
    get_object: function (state) {//无参
        if (state.age < 18) {
            return state.name + '未成年'
        }
        return state.name + '已经成年了'
    },
    get_object2: function (state) {//有参数
        return function(value){
            return state.name + value;
        }
    }
}

组件中{this.$store.getters.xxx来获取

<template>
  <div>
    我放在store中的数据是 {{ this.$store.state.name }},
    {{ this.$store.state.age }}
    <br>
    <span>不带参数的数据：{{ this.$store.getters.get_object }}</span>
    <br>
    <span>带参数的数据(携带一个刚好18岁)：{{
        this.$store.getters.get_object2("刚好18岁")
      }}</span>
  </div>
</template>

7.Modoules

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。这里就不过多介绍了，看官方文档(Module | Vuex (vuejs.org))

8.辅助函数

vuex提供了几个的辅助函数，有mapState、mapGetter、mapMutation、mapAction。都是一些复杂语句的简写形式。

引入函数

import {mapState,mapGetters,mapMutation,mapAction} from 'vuex'

mapState

如果state中的数据很多，那我们要重复写很多这样的this.$store.state.XXX代码,我们就可以通过mapState来映射。

数组的写法

export default {
  computed:{
    ...mapState(['name','age'])//自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
  }
};

如果你想取名别名的话，就要写成对象的形式

    ...mapState(
      {
        myname: 'name',
        myage: "age",
      }

mapGetters

mapGetters和mapState很相似，只不过是映射Getters。替代this.$store.getters.XXX

computed: {
...mapGetters(['get_object','get_object2']),//数组形式写法
    ...mapGetters({get1:'get_object',get2:'get_object2'})//可以取别名，对象形式写法
  },

mapMutation

替代this.$store.commit('XXX')

  methods: {
    ...mapMutations(['modify_age','modify_age2']),//数组形式写法
    ...mapMutations({modify:'modify_age',modify2:'modify_age2'}),//可以取别名，对象形式写法
  },

mapAction

替代this.$store.dispatch('XXX')

  methods: {
    ...mapActions(['asy_modify','asy_modify2']),//数组形式写法
...mapActions({act_modify:'asy_modify',act_modify2:'asy_modify2'})//对象形式写法
  },

以上这些辅助函数，涉及到传参都需在使用的计算属性的时候传入。

四、写在最后

更具体的请看官网文档，欢迎各位大佬指点江山。

https://vuex.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF-%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F

看到最后点赞收藏吧！

在线咨询

上一篇：Python中输出表格详解，轻松实现专业报表！
下一篇：Jupyter Notebook 最佳实践

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商