vuex快速上手

一.vuex是什么？

1.vuex是什么：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 。       ---源于vuex官网

通俗点讲，vuex就是管理数据状态的。vuex官网：https://vuex.vuejs.org/zh/

 2.Vuex 背后的基本思想：

把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

3.什么时候使用vuex：

构建一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态。否则，用个简单的 store 模式就可以了。（因为使用 Vuex 可能是繁琐冗余的）

先放一张vuex原理图混个脸熟（奸笑）

二.基本用法

1.Vuex的核心

vuex由以下几部分组成：

• state
• getters
• mutations
• actions
• modules

store容器（就是实例化的vuex）中在state里添加状态，然后用mutations更改状态，getters来获得部分状态, actions来异步更改状态，modules来分块管理状态。

2.使用

2.1 安装

参考官网  https://vuex.vuejs.org/zh/installation.html

这里我们以脚手架vue Cli的应用形式举例讲解

2.2具体使用

①入口文件main.js 引入vue 和vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

②创建vuex实例store

const store = new Vuex.Store({ //创建一个vuex实例store
  //全局状态
  state:{
  
  },
  getters:{
    
  },
  mutations :{
    
  },
  actions:{
   
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store  //将vuex实例挂载到Vue中
})

注意：state ,gettwes, mutations ,actions单词别拼错了（我开始学习的时候，项目一直报错，就发现是因为单词拼错导致的，除了state,其他都有s）

接下来以购物车中的商品数量count为例：

State

state:{
     count:0  //商品数量初始化
},

使用：暂时在App.vue页面使用

在computed中以count为方法名，再将store容器中state对象的count返回--->return   store.state.count

<script>
export default {
  name: 'App',
  computed:{
      count(){
         return  this.$store.state.count
        }
  }
}
</script>

然后count当作普通computed中的属性使用即可

<template>

  <div id="app">

    <h4>小玲的购物车中一共有{{count}}个商品</h4>

    <router-view/>

  </div>

</template>

页面效果：

 Getter   

对数据进行包装处理后使用

  getters:{
   //对state进行包装处理   再return值出去
     myCount:(state)=>{
       return state.count + '万'
     }
  },

使用：

<template>
  <div id="app">
      <h4>小玲的购物车中一共有{{count}}个商品</h4>
      <h4>小玲的购物车中一共有{{myCount}}个商品</h4>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed:{
    count(){
      return this.$store.state.count
    },
    myCount(){
      return this.$store.getters.myCount   //使用
    }
  }
}
</script>

页面效果：

Getter还可以接受getters作为第二个参数

myCount1:(state,getters)=>{  //state作为第一个参数  也接受其他getter作为第二个参数
   let oldArr = state.count1;
       oldArr.push(getters.myCount)
       return oldArr
 }
//count1:[1,3,5,7,9]

App.vue 使用方法和接收state这一个参数一样

  <h5>现在的数据：{{myCount1}}</h5>

myCount1(){
    return this.$store.getters.myCount1
 }

实现效果：

mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

  //main.js
    mutations :{
    increment(state){
      state.count ++
  },
     desincrement(state){
      state.count --
  }
  },

现在先来写个静态页面，在page目录下新建一个cart.vue(或者直接使用HelloWorld.vue其他.vue文件也可以)

然后写一个增加商品数量和减少商品数量的按钮

  <template>
    <div class="hello">
      <h4 class="mr">{{ msg }}</h4>
      <el-row>
         <el-button type="primary">+</el-button>
          <span>{{count}}</span>
        <el-button type="success">-</el-button>
     </el-row>
   </div>
 </template>
 
 <script>
 export default {
   name: 'HelloWorld',
   data() {
     return {
       msg: '购物车页面'
     }
   },
   computed:{
     count(){
       return this.$store.state.count; //商品数量
     }
   },
   mounted() {
    
   },
   methods: {
   }
 }
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h1, h2 {
   font-weight: normal;
 }
 ul {
   list-style-type: none;
   padding: 0;
 }
 li {
   display: inline-block;
   margin: 0 10px;
 }
 a {
   color: #42b983;
 }61 </style>

 //el-row和el-button参考 https://element.eleme.cn/#/zh-CN 这里不再讲述啦   

现在页面显示的效果如下图（app.vue中的无关代码暂时注释掉）：

接下来更改 Vuex 的 store 中的状态,我们不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

　　具体使用方式：

  methods: {
     increment(){ //增加
      this.$store.commit('increment'); //唤醒、触发类型为increment的mutations方法
    },
    desincrement(){//减少
      this.$store.commit('desincrement'); //唤醒、触发类型为desincrement的mutations方法
 } 
}

然后把方法绑定在对应的按钮上

<el-row>
     <el-button type="primary" @click="increment">+</el-button>
        <span>{{count}}</span>
     <el-button type="success" @click="desincrement">-</el-button>
</el-row>

好啦，现在就可以改变store中count的数量啦，上效果图

另外我们还可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：当参数布置一个时，payload也可以是一个对象，直接作为参数传入

main.js:

  mutations :{
    increment(state,n){ //①直接传入额外的参数n
      state.count += n 
   },
     desincrement(state,payload){  //②传入载荷payload是一个对象
      state.count -= payload.amount   

} }

cart.vue

  methods: {
   increment(){
     this.$store.commit('increment',2);  
   },
    desincrement(){
     this.$store.commit('desincrement',{amount:1});
   }
}
</script>

注意：①当传入的参数只有一个时，可以直接传参；当参数不止一个时载荷payload可以作为一个对象，传入多个参数。值得注意的是处理方式的不同

           ②一条重要的原则就是要记住 mutation 必须是同步函数

actions

Action 类似于 mutation，不同在于：

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

需要注意的是，Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters

 main.js

 actions:{
    //注册一个简单的action
    myIncrease(context){ //接受context对象
    //...
    context.commit('increment',2) //此时触发type为increment的mutation要接受第二个参数，所以需要传一个参数；如果不传参会出错

 } 7 }

action用dispatch 来分发（就当是action需要用dispatch来触发），这点是和mutations不同的地方

  methods: {
   increment(){
     this.$store.commit('increment',2);
   },
    desincrement(){
     this.$store.commit('desincrement',{amount:1});
   },
   myincrement(){
     this.$store.dispatch('myIncrease');
     //dispatch分发action中myIncrease的方法，相当于用dispatch来触发action中的myIncrease方法

   }
  }

然后将methods中的myincrement绑定在增加按钮上，实现效果和increment 方法一样

<el-button type="primary" @click="myincrement">+</el-button>

还可以支持载荷和对象的形式分发

     myincrement1(){
     this.$store.dispatch('myIncrease',{amount:2}); //以载荷的形式分发
    },
      myincrement2(){
      this.$store.dispatch({
       type:'myIncrease',
       amount:2
       }); //以对象的形式分发
   },

Action通常是异步的，比如一些定时器或者api请求都可以放在这里，具体的做法可以参考官网，讲的非常详细了。

附上完整代码：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
//import axios from './api'
//import './config/rem'

Vue.config.productionTip = false

Vue.use(Vuex)
Vue.use(ElementUI)
//Vue.prototype.$http = axios // 将api挂载到vue的原型上 --- restful风格

const store = new Vuex.Store({ //创建一个vuex实例
  //全局状态
  state:{
     count:0,
     count1:[1,3,5,7,9]
  },
  getters:{
  /*  myCount(state){
      return state.count
    } */
     myCount:(state)=>{
       return state.count 
     },
     myCount1:(state,getters)=>{  //state作为第一个参数  也接受其他getter作为第二个参数
      let oldArr = state.count1;
          oldArr.push(getters.myCount)
         return oldArr
    }
  },
  mutations :{
    increment(state,n){
      state.count += n
  },
     desincrement(state,payload){
       console.log(payload)
       state.count -= payload.amount
  }
  },
  actions:{
    //注册一个简单的action
    myIncrease(context){ //接受context对象
    //...
    context.commit('increment',2)
   }
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})

App.vue

<template>
  <div id="app">
    <!--   <h4>小玲的购物车中一共有{{count}}个商品</h4>
      <h4>小玲的购物车中一共有{{myCount}}个商品</h4>
      <h5>现在的数据：{{myCount1}}</h5> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed:{
    count(){
      return this.$store.state.count
    },
    myCount(){
      return this.$store.getters.myCount
    },
    myCount1(){
       return this.$store.getters.myCount1
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Helloworld.vue

<template>
  <div class="hello">
    <h4 class="mr">{{ msg }}</h4>
    <el-row>
        <el-button type="primary" @click="myincrement">+</el-button>
        <span>{{count}}</span>
      <el-button type="success" @click="desincrement">-</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '购物车页面'
    }
  },
  computed:{
    count(){
      return this.$store.state.count;
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
   increment(){
     this.$store.commit('increment',2);
   },
    desincrement(){
     this.$store.commit('desincrement',{amount:1});
   },
    myincrement(){
     this.$store.dispatch('myIncrease'); //dispatch分发action中myIncrease的方法，相当于用dispatch来触发action中的myIncrease方法
    }, 
     myincrement1(){
     this.$store.dispatch('myIncrease',{amount:2}); //以载荷的形式分发
   },
      myincrement2(){
      this.$store.dispatch({
       type:'myIncrease',
       amount:2
       }); //以对象的形式分发
   }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.mr{margin-bottom: 2rem;}
</style>

 辅助函数

实际开发中，我们在一个组件中可以会用到很多状态，这时就可以借助辅助函数。是es6的语法糖，能够方便我们使用store。

先介绍几个方法

mapState辅助函数：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

mapGetters 辅助函数：mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

 mapMutations 辅助函数：将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）

mapActions 辅助函数：将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）

具体使用方式见下方代码：

<script>
import {mapState, mapGetters} from 'vuex' 
export default {
  name: 'App',
  computed:{
    // ...mapState(['count']),    //当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组
     ...mapState({
       count1:state=>state.app.count    //映射关系（获取state中的资源）当计算属性的名称和state子节点名称不同时，可以以箭头函数的形式来，箭头函数可使代码更简练
    }), 
    ...mapGetters(['myCount']) 
 }
}
</script>

先引入vuex中的辅助函数mapState, mapGetters等（按照实际使用情况引入），然后还可以用对象展开运算符 与其他局部计算属性混用（一般加上扩展用算符【...】比较好）。最后氨基酸属性使用就行

当页面只使用一个state子节点时，可以直接在mapState函数中传入字符串数组；

当使用多个state子节点时，可以以映射关系的方式处理

mapGetters同mapState

对于mapMutations，mapActions组件中使用方式如下代码

...mapMutations(['increment','desincrement'])
...mapActions(['myIncrease','myDecrease']),

这样，使用辅助函数就大大简化了代码~

这里只是简单的介绍了一下，可以去官网查看更详细的使用方法

（其实以上只是简单过了一遍官网，要是觉得讲的不清楚不明白的可以移步到官网学习）

项目结构

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

在实际开发中，遇到一些大型项目并且业务比较复杂时，每个模块都有很多数据需要处理，这时一个main.js 或者一个store.js文件可能不便于管理和维护，此时就可以把每个模块放到一个单独的文件进行处理，然后只保留一个index.js作为vuex的出口文件，如下图文件目录：

store
│ index.js
│ mutation-types.js
│
└─module
    │ app.js
    │ cart.js

在index.js出口文件中引入各个模块

import Vue from 'vue'
import Vuex from 'vuex'
import app from './module/app'
import cart from './module/cart'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules:{
        app,
        cart
    }
})

export default store

然后再main.js文件中引入store,并将store挂载到vue上

 对于每个模块，我们直接导出就行啦

import {INCRMENT,DESCREMENT} from '../mutation-types'

const app = {
    //全局状态
    state:{
        count:0
    },
    getters:{
         //对state进行包装处理   return值出去
         myCount(state){
             return state.count + '个'
         }
    },
    mutations :{
       [INCRMENT](state,n){
        state.count += n
    },
       [DESCREMENT](state,n){
        state.count -= n
    }
    },
    actions:{
        //执行型逻辑相关的
     /*    myIncrease(context){
           //...
           context.commit('increment')
       },*/
       myDecrease(context){
           context.commit('desincrement',1)
       }, 
       //异步操作
        async myIncrease(context,obj){
            context.commit('increment',2)
            const product = [1,2,3,4,5] //await this.$http('')
            console.log(obj)
            return product
        }
    }
}

export default app

附上mutation-types.js文件的代码

export const INCRMENT = 'INCRMENT'
export const DESCREMENT = 'DESCREMENT'

组件Helloworld.vue中使用：

<template>
  <div class="hello">
    <h4 class="mr">{{ msg }}</h4>
    <h6>{{count}}个aa</h6>
    <h6>{{myCount}}bb</h6>
    <el-row>
        <el-button type="primary" @click="increment">+</el-button>
        <span>{{count}}</span>
      <el-button type="success" @click="desincrement">-</el-button>
    </el-row>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'  //先引入vuex中的辅助函数
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '购物车页面'
    }
  },
  computed:{
    ...mapState({
      count:state=>state.cart.count
    }),
    ...mapGetters(['myCount'])   //如果你想将一个 getter 属性另取一个名字，使用对象形式：...mapGetters({myOtherCount:'myCount'})    相当于把`this.myOtherCount`映射为`this.$store.cart.getters.myCount`},
 mounted() { 

 },
 methods: {
...mapMutations(['INCRMENT','DESCREMENT']) 

  increment(){ //增加
    this.$store.commit('INCRMENT',2);
  }, 
  desincrement(){ //减少
    this.$store.commit('DESCREMENT',1); 
  } 
 } 
} 
</script>

上效果图：

现在补充讲一下mutation-types.js文件

该文件主要作用为放置所有的命名 Mutations 的常量，方便合作开发人员理清整个 app 包含的 mutations。在采用模块机制时，可以在每个模块内只引入相关的 mutations（像上文app.js文件），也可以使用 import * as types 简单粗暴地引入全部。

好了，Vuex就稀里糊涂的讲完了

 最后推荐几篇写的比较好的文章：https://www.jianshu.com/p/04ebf09e72a1

                                                       https://juejin.im/post/5860cc47128fe10069e19c26

再次附上官网：https://vuex.vuejs.org/zh/