Vue全家桶之VueX

Posted 2021-10-04 生命是有光的

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue全家桶之VueX相关的知识，希望对你有一定的参考价值。

🔥Vue🔥

🔥Vue全家桶	地址
🔥Vue全家桶之Vue基础指令(一)	https://blog.csdn.net/Augenstern_QXL/article/details/120117044
🔥Vue全家桶之Vue组件化开发(二)	https://blog.csdn.net/Augenstern_QXL/article/details/120117322
🔥Vue全家桶之VueCLI 脚手架V2→V4版本(三)	https://blog.csdn.net/Augenstern_QXL/article/details/120117453
🔥Vue全家桶之webpack详解(四)	https://blog.csdn.net/Augenstern_QXL/article/details/120297794
🔥Vue全家桶之Vue-router路由(五)	https://blog.csdn.net/Augenstern_QXL/article/details/120339146
🔥Vue全家桶之VueX(六)	https://blog.csdn.net/Augenstern_QXL/article/details/120339600

配套视频讲解: CoderWhy老师的Vuejs讲解

1、Vuex

1.1、什么是Vuex

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

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理到底是什么？

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。
其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。
然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。
那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？

当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。
如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。
不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。

1.2、单界面的状态管理

我们知道，要在单个组件中进行状态管理是一件非常简单的事情。

这图片中的三种东西如下：

State：状态
View：视图层，可以针对 State 的变化，显示不同的信息
Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的变化

<template>
  <div>
    <div>当前计数:{{counter}}</div>
      <button @click="counter+=1">+1</button>    
      <button @click="counter-=1">-1</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
      return {
          counter: 0
      }
  }
}
</script>

<style scoped>

</style>

在这个案例中，我们有木有状态需要管理呢？没错，就是个数counter。

counter需要某种方式被记录下来，也就是我们的State。

counter目前的值需要被显示在界面中，也就是我们的View部分。

界面发生某些操作时（我们这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions

这不就是上面的流程图了吗？

ok，先安装 vuex

npm install vuex --save

1.3、多界面状态管理

Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢？

多个视图都依赖同一个状态(一个状态改了，多个界面需要进行更新)
不同界面的 Actions 都想修改同一个状态(Home.vue 需要修改，Profile.vue 也需要修改这个状态)

也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个视图，但是也有一些状态(状态a/状态b/状态c)属于多个视图共同想要维护的

状态1/状态2/状态3 你放在自己的房间中，你自己管理自己用，没问题。
但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理！！！
没错，Vuex就是为我们提供这个大管家的工具。

全局单例模式(大管家)

我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。
之后，你们每个视图，按照我规定好的规定，进行访问和修改等操作。
这就是Vuex背后的基本思想。

我们创建一个文件夹 src/store，并且在其中创建一个 index.js 文件，代码如下：

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

// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++
        },
        decrement(state){
            state.count--
        }
    },
    actions: {
        
    },
    getters: {
        
    },
    modules: {
        
    }
})

// 导出store对象
export default store

其次，我们让所有的Vue组件都可以使用这个store对象

来到 src/main.js文件，导入store对象，并且挂载到new Vue中

import Vue from 'vue'
import App from './App'
// 1.导入store对象
import store from './store'


new Vue({
    el: '#app',
    // 2.挂载 store
    store,
    render: h => h(App)
})

这样，在其他Vue组件中，我们就可以通过 this.$store的方式，获取到这个store对象了

<template>
  <div id="app">
      <p>
      <button @click="increment">+1</button>
      <button @click="decrement">-1<</button>
  </div>
</template>


<script>
export default {
    name: 'App',
    components: {
        
    },
    computed: {
        count: function() {
            return this.$store.state.count
        }
    },
    methods: {
        increment: function() {
            this.$store.commit('increment')
        },
        decrement: function() {
            this.$store.commit('decrement')
        }
    }
}

</script>

使用步骤小结：

提取出一个公共的 store 对象，用于保存在多个组件中共享的状态
将 store 对象放置在 new Vue 对象中，这样可以保证在所有的组件中都可以使用到
在其他组件中使用 store 对象中保存的状态即可
- 通过 this.$store.state 属性的方式来访问状态
- 通过 this.$store.commit('mutation中方法') 来修改状态
我们通过提交 mutation 的方式，而非直接改变 store.state.count
这是因为 Vuex 可以更明确的追踪状态的变化，所以不要直接改变 store.state.count 的值

1.4、安装vue-devtools

在 Chrome 网上应用商店搜索 devtools
选择 vue.js devtools ，添加即可

1.5、Vuex核心概念

Vuex有几个比较核心的概念:

State
Getters
Mutation
Action
Module

1.5.1、State 单-状态树

Vuex提出使用单一状态树, 什么是单一状态树呢？

英文名称是Single Source of Truth，也可以翻译成单一数据源。
我用一个生活中的例子做一个简单的类比，我们知道，在国内我们有很多的信息需要被记录，比如上学时的个人档案，工作后的社保记录，公积金记录，结婚后的婚姻信息，以及其他相关的户口、医疗、文凭、房产记录等等（还有很多信息）。
这些信息被分散在很多地方进行管理，有一天你需要办某个业务时(比如入户某个城市)，你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息，最后到一个地方提交证明你的信息无误。这种保存信息的方案，不仅仅低效，而且不方便管理，以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护，当然国家目前已经在完善我们的这个系统了)。
这个和我们在应用开发中比较类似：如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难，所以Vuex也使用了单一状态树来管理应用层级的全部状态。单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

1.5.2、Getters基本使用

有时候，我们需要从 store 中获取一些 state 变异后的状态，比如下面的 Store

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

// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
    state: {
        students: [
            {id: 100,name: 'why',age: 18},
            {id: 111,name: 'kobe',age: 21},
            {id: 112,name: 'lucy',age: 25},
            {id: 113,name: 'lilei',age: 2},
        ]
    },
    mutations: {
        
    },
    actions: {
        
    },
    getters: {
       // 获取年龄大于20的学生对象
       more20stu(state){
           return state.students.filter(s => s.age >20)
       } 
    },
    modules: {
        
    }
})

// 导出store对象
export default store

这样我们在其他 .vue 组件中也可以拿到年龄大于20的学生对象

<template>
  <div>
      <h2>{{$store.getters.more20stu}}</h2>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

①、Getters作为参数和传递参数

如果我们已经有了一个获取所有年龄大于20岁学生的列表 getters，那么代码可以这样来写

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

// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
    state: {
        students: [
            {id: 100,name: 'why',age: 18},
            {id: 111,name: 'kobe',age: 21},
            {id: 112,name: 'lucy',age: 25},
            {id: 113,name: 'lilei',age: 2},
        ]
    },
    mutations: {
        
    },
    actions: {
        
    },
    getters: {
       // 获取年龄大于20的学生对象
       more20stu(state){
           return state.students.filter(s => s.age >20)
       },
       // 获取年龄大于20的学生个数
       more20stuLength(state,getters) {
           return getters.more20stu.length
       }
    },
    modules: {
        
    }
})

// 导出store对象
export default store

getters 默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数.

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

// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
    state: {
        students: [
            {id: 100,name: 'why',age: 18},
            {id: 111,name: 'kobe',age: 21},
            {id: 112,name: 'lucy',age: 25},
            {id: 113,name: 'lilei',age: 2},
        ]
    },
    mutations: {
        
    },
    actions: {
        
    },
    getters: {
       // 获取年龄大于20的学生对象
       more20stu(state){
           return state.students.filter(s => s.age >20)
       },
       // 获取年龄大于20的学生个数
       more20stuLength(state,getters) {
           return getters.more20stu.length
       },
       // 让用户自己决定获取年龄大于多少
       moreAgeStu(state) {
           return function(age){
               return state.students.filter(s => s.age > age)
           }
       }
    },
    modules: {
        
    }
})

// 导出store对象
export default store

这样我们在其他 .vue 组件中就可以传入年龄数值筛选了

<template>
  <div>
      <h2>{{$store.getters.more20stu}}</h2>
      <h2>{{$store.getters.more20stuLength}}</h2>
      <h2>{{$store.getters.moreAgeStu(8)}}</h2>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

1.5.4、Mutation状态更新

Vuex的store状态的更新唯一方式：提交Mutation
Mutation主要包括两部分：
- 字符串的事件类型（type）
- 一个回调函数(handler) 该回调函数的第一个参数就是 state

mutation 的定义方式

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

// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++
        },
        decrement(state){
            state.count--
        }
    },
    actions: {
        
    },
    getters: {
       
    },
    modules: {
        
    }
})

// 导出store对象
export default store

通过 mutation 更新

<template>
  <div id="app">
      <button @click="increment">+1</button>
      <button @click="decrement">-1<</button>
  </div>
</template>


<script>
export default {
    name: 'App',
    components: {
        
    },
    computed: {
        count: function() {
            return this.$store.state.count
        }
    },
    methods: {
        increment: function() {
            this.$store.commit('increment')
        },
        decrement: function() {
            this.$store.commit('decrement')
        }
    }
}

</script>

①Mutation传递参数

在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数，参数被称为 mutation 的载荷(Payload)

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

// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++
        },
        decrement(state){
            state.count--
        },
        incrementCount(state,count){
            state.counter += count
        }
    },
    actions: {
        
    },
    getters: {
       
    },
    modules: {
        
    }
})

// 导出store对象
export default store

我们在其他 .vue 组件中来修改状态

<template>
  <div id="app">
      <button @click="increment">+1</button>
      <button @click="decrement">-1<</button>
      <button @click="addCount(5)">+5</button>
      <button @click="addCount(10)">+5</button>
  </div>
</template>


<script>
export default {
    name: 'App',
    components: {
        
    },
    methods: {
        increment: function() {
            this.$store.commit('increment')
        },
        decrement: function() {
            this.$store.commit('decrement')
        },
        addCount(count){
            this.$store.commit('incrementCount',count)
        }
    }
}

</script>

但是如果参数不是一个呢？

比如我们有很多参数需要传递，这个时候，我们通常会以对象的形式传递，也就是 payload 是一个对象。

这个时候可以再从对象中取出相关的信息。

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

// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
    state: {
        students: [
            {id: 100,name: 'why',age: 18vue 项目实战 (vue全家桶之--- vuex)
 Vue全家桶之组件化开发
 Vue全家桶之Vue基础指令
 Vue全家桶之webpack详解
 Vue全家桶之Vue组件化开发
 Vue全家桶之Vue基础