Vuex的安装与使用

## 一、Vuex简介

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

## 二、安装Vuex

在创建Vue-Cli工程时，将Vuex扩展加上即可

![image-20251029152201498](https://pic.soki.me/file/piclist/image-20251029152201498.png)

安装成功后项目目录中会多出`store`目录

## 三、Vuex使用

#### 1、结构

Vuex中有五个默认的基本对象：

`state`：Vuex中的公共的状态，可以将state看作是全局唯一的共享数据仓库。类似于Vue中的`data()`，但state是所有组件共享的；`data()`是某个组件独有的。

`getters`：state的计算属性，类似Vue中的`computed`计算属性。

`mutations`：声明方法，用于修改state，类似于Vue中的`methods`方法，但只能修改`同步`数据。

`actions`：声明方法，用于修改state，类似Vue中的`methods`方法，只能修改`异步`数据，比如调用api接口。

`modules`：store的子模块。

#### 2、`state`

用于声明全局属性，所有的组件都可以使用，使用方法是通过`$store.state.属性名`或者是`this.$store.state.属性名`

创建工程后删除没有用的组件`HelloWorld.vue`

##### 添加全局属性

```js
import {createStore} from 'vuex'

export default createStore({
    state: {
        num: 10
    },
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})
```

##### 在`HomeView.vue`中调用

```html
<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <p v-text="num"></p>
        <button @click="changeNum">change</button>
    </div>
</template>

export default {
    name: 'HomeView',
    computed: {
        num() {
            return this.$store.state.num + 20;
        }
    },
    methods: {
        changeNum() {
            this.$store.state.num++;
        }
    }
}
</script>
```

##### 在`AboutView.vue`中调用

```html
<template>
    <div class="about">
        <h1>This is an about page</h1>
        <p v-text="$store.state.num"></p>
    </div>
</template>
<script setup>
</script>
```

但在上面例子可以看出，共享的属性并不是安全的，任何一个组件内都可以对其进行修改（不能预测值的改变），为了尽量避免这种不安全的情况，尽量不要在组件中修改其值，较为安全的修改需要用到`getters`

#### 3、`getters`

通过在getters中改变state的值即可使值的改变成为Vue可预测的，使用方法是通过`$store.getters.属性名`或者是`this.$store.getters.属性名`

##### 添加`getters`

```js
import {createStore} from 'vuex'

export default createStore({
    state: {
        num: 10
    },
    getters: {
        changeNum(state) {
            return state.num * state.num;
        }
    },
    mutations: {},
    actions: {},
    modules: {}
})
```

##### 在`HomeView.vue`中调用

```html
<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <p v-text="$store.state.num"></p>
        <p v-text="$store.getters.changeNum"></p>
    </div>
</template>

export default {
    name: 'HomeView'
}
</script>
```

##### 在`AboutView.vue`中调用

```html
<template>
    <div class="about">
        <h1>This is an about page</h1>
        <p v-text="$store.state.num"></p>
        <p v-text="$store.getters.changeNum"></p>
    </div>
</template>
<script>
export default {
    name: 'about'
}
</script>
```

#### 4、`mutations`

`getters`只能做到被动处理数据，想要主动处理数据时还是无法做到，所以要用到`mutations`去修改同步数据。使用方法是通过`this.$store.commit('方法名',参数值);`

##### 添加`mutations`

```js
import {createStore} from 'vuex'

##### 在`HomeView.vue`中调用

```html
<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <p v-text="$store.state.num"></p>
        <p v-text="$store.getters.changeNum"></p>
        <button @click="change">change</button>
    </div>
</template>

export default {
    name: 'HomeView',
    methods: {
        change() {
            this.$store.commit('addNum',123);
        }
    }
}
</script>
```

#### 5、`actions`

mutations只能做同步修改，异步修改只能通过`actions`来修改

##### 添加`actions`

```js
import {createStore} from 'vuex'

export default createStore({
    state: {
        num: 10
    },
    getters: {
        changeNum(state) {
            return state.num * state.num;
        }
    },
    mutations: {
        addNum(state, param) {
            state.num += param;
        }
    },
    actions: {
        addNum(state, param) {
            // 3秒后再修改数据
            setTimeout(() => {
                state.commit('addNum', param)
            }, 3000)
        }
    },
    modules: {}
})
```

##### 在`HomeView.vue`中调用

export default {
    name: 'HomeView',
    methods: {
        change() {
            this.$store.commit('addNum', 123);
        },
        changeAsync() {
            this.$store.dispatch('addNum', 123);
        }
    }
}
</script>
```

## 一、Vuex简介

## 二、安装Vuex

在创建Vue-Cli工程时，将Vuex扩展加上即可

![image-20251029152201498](https://pic.soki.me/file/piclist/image-20251029152201498.png)

安装成功后项目目录中会多出`store`目录

## 三、Vuex使用

#### 1、结构

Vuex中有五个默认的基本对象：

`state`：Vuex中的公共的状态，可以将state看作是全局唯一的共享数据仓库。类似于Vue中的`data()`，但state是所有组件共享的；`data()`是某个组件独有的。

`getters`：state的计算属性，类似Vue中的`computed`计算属性。

`mutations`：声明方法，用于修改state，类似于Vue中的`methods`方法，但只能修改`同步`数据。

`actions`：声明方法，用于修改state，类似Vue中的`methods`方法，只能修改`异步`数据，比如调用api接口。

`modules`：store的子模块。

#### 2、`state`

用于声明全局属性，所有的组件都可以使用，使用方法是通过`$store.state.属性名`或者是`this.$store.state.属性名`

创建工程后删除没有用的组件`HelloWorld.vue`

##### 添加全局属性

```js
import {createStore} from 'vuex'

export default createStore({
    state: {
        num: 10
    },
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})
```

##### 在`HomeView.vue`中调用

```html
<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <p v-text="num"></p>
        <button @click="changeNum">change</button>
    </div>
</template>

##### 在`AboutView.vue`中调用

```html
<template>
    <div class="about">
        <h1>This is an about page</h1>
        <p v-text="$store.state.num"></p>
    </div>
</template>
<script setup>
</script>
```

#### 3、`getters`

通过在getters中改变state的值即可使值的改变成为Vue可预测的，使用方法是通过`$store.getters.属性名`或者是`this.$store.getters.属性名`

##### 添加`getters`

```js
import {createStore} from 'vuex'

##### 在`HomeView.vue`中调用

export default {
    name: 'HomeView'
}
</script>
```

##### 在`AboutView.vue`中调用

#### 4、`mutations`

##### 添加`mutations`

```js
import {createStore} from 'vuex'

##### 在`HomeView.vue`中调用

export default {
    name: 'HomeView',
    methods: {
        change() {
            this.$store.commit('addNum',123);
        }
    }
}
</script>
```

#### 5、`actions`

mutations只能做同步修改，异步修改只能通过`actions`来修改

##### 添加`actions`

```js
import {createStore} from 'vuex'

##### 在`HomeView.vue`中调用

最后修改：2025 年 10 月 29 日

👆请简单粗暴地爱我。

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Spring框架依赖注入

MySQL知识扩展

Day12 - JDBC驱动安装及其简单使用方法

Java常用注解表

Electron的简介

JDBC基础模板

Oracle基本操作

MySQL知识扩展

Java各种程序或框架创建流程

Java高级编程

Vuex的安装与使用

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Vuex的安装与使用

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款