来谈谈Vuex吧

全文总计6300字预计阅读时间25分钟

前言

vuex和路由是同级别的但是vuex简单但是不完全简单【手动狗头】

vuex

专业术语：vuex全局状态共享

人话：就是在这个项目里面的数据（vuex创建的），这些数据是组件啊，分页啊都可以用的，它是共享的…

举个例子：
以前：以前啊有个程序员，有一个git库，他自己开发项目喜欢单干——数据啥都都是自己弄
现在：由于收入太低了，这个程序员就找了一家公司进去做前端了，这个库就变成了多人开发了——前端，后端，测试…

演示

demo

接下来我们来演示一下
创建两个组件

给点基础的东西

fourcom.vue

<template>
  <div class="four-com">
    <h1>four comh1>
    <p>{{num}}p>
    <button @click="num++">num++button>
  div>
template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
};
script>

<style lang="scss" scoped>
.four-com {
  padding: 10px;
  margin: 4px;
  background-color: rgb(23, 82, 82);
}
style>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

threecom.vue

<template>
  <div class="four-com">
    <h1>three comh1>
    <button @click="num++">num++button>
  div>
template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
};
script>

<style lang="scss" scoped>
.four-com {
  padding: 10px;
  margin: 4px;
  background-color: rgb(23, 82, 82);
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

App.vue
引入组件

<template>
  <div>
    <three-come/>
    <four-come/>
  div>
template>

<script>
import FourCome from './components/FourCome.vue'
import ThreeCome from './components/ThreeCome.vue'
  export default {
  components: { ThreeCome, FourCome },
    
  }
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

启动之后看结果

数据互通

看 图/示例 我们发现是可以点击的，但是他们两个数据（data：num）都是一个参数，但是数据不一样这是由于他们两个是不同的组件所以说，数据不会相同，因为两个组件之间的数据树是独立的，所以我们要实现这些数据的互通就要用到Vuex了

Vuex的实现

Vuex ：全局状态管理-组件之间的数据共享

Vuex的配置选项存在src目录下的store文件夹下的index.js里面，里面保存的是Vuex的配置选项，所以找到store目录下的index.js

打开我们就会发现

这些对象有些什么意义呢？

state属性

state

接上回我们说到我们已经完成了创建但是两个组件之间的数据不是互通的所以我们要实现就需要使用Vuex的state属性

创建一个打印选项打印当前DOM树

我们来找一下state

相信到这里了，大家应该知道怎么做了，下面我们来试一下

找到store目录下的index.js文件在state下面添加一条数据然后我们再去控制台看一下

现在已经有了数据的，那我们应该怎么使用这些数据呢？

打印

既然我们可以看到里面的数据了，举一反三我们像访问num属性就只需要

 console.log(this.$store.state.num);
1

所以我们要实现更新的话就可以

当我们把两个给修改后就可以实现数据互通

主要修改的代码

<p>{{ $store.state.num }}p>
    <button @click="$store.state.num++">num++button>

1
2
3

严格模式与mutations方法

首先再index.js里面开启严格模式

strict:true
1

位置如图：

开启严格模式之后我们再去点击按钮就会发现点击之后会报错

报错代码：

Error in callback for watcher "function () {
    return this._data.$$state;
  }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

1
2
3
4

报错翻译：

这是为什么呢？

这是因为数据是公共的并不是谁都要提交的，也不是谁都能用的所以这就相当于的警察局对枪的监管，
枪是很重要的，所以你想要使用就需要申请/记录/出示证明，数据也是如此，所以严格模式没开启之前就是美国对枪的监管，开启之后就是中国

mutations

mutations：变化：在这个属性中书写用于修改共享数据的方法
固定参数：state：共享数据所在的位置

接下来我们去看一下DOM树

接下来我们添加一些方法然后我们可以使用commit来调用这些方法

然后回到App.js添加

代码：

<template>
  <div>
    <three-come />
    <four-come />
    <div>
      <p>num的值：{{ this.$store.state.num }}p>
      <button @click="Addnumto">Num++button>
    div>
  div>
template>

<script>
import FourCome from "./components/FourCome.vue";
import ThreeCome from "./components/ThreeCome.vue";
export default {
  components: { ThreeCome, FourCome },
  mounted() {
    console.log(this);
  },
  methods: {
    Addnumto() {
      // commit 提交
      // 向$state提交生气名字是num++的方法
      this.$store.commit("Addnum");
    },
  },
};
script>

<style lang="scss" scoped>style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

但是为了方便我们需要实现传参过去怎么办呢
这个时候我们就可以传使用参数

接下来我们来实现登录和退出

index.js添加代码

App.vue代码


代码：

<template>
  <div>
    <three-come />
    <four-come />
    <div>
      <p>num的值：{{ this.$store.state.num }}p>
      <button @click="Addnumto">Num++button>
    div>
    <div>
      
      <p>登陆状态：{{this.$store.state.islogin}}p>
      
      <button @click="loginto(true)">登录button>
      <button @click="loginto(false)">退出button>
    div>
  div>
template>

<script>
import FourCome from "./components/FourCome.vue";
import ThreeCome from "./components/ThreeCome.vue";
export default {
  components: { ThreeCome, FourCome },
  mounted() {
    console.log(this);
  },
  methods: {
    Addnumto() {
      // commit 提交
      // 向$state提交生气名字是num++的方法
      this.$store.commit("Addnum");
    },
    loginto(x){
      // 传参为X为形参
      console.log(x);
      // 打印显示
      this.$store.commit("Loginto", x);
      // 调用方法
    }
  },
};
script>

<style lang="scss" scoped>style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

结果：

and

现在我们已经实现的方法的使用，但是用它显示的为false和true啊，怎么让他显示登录和未登录呢？【如果在App.vue里面写判断返回的话，不怎么安全】

所以我们可以使用：getters

getters

getters：计算属性 ：在已有的数据里判断返回值
固定参数：state：共享数据所在的位置

index.js

App.vue

实现：

如果传参的话就可以实现很多的操作