19-2.vuex

目录

1  安装

2  挂载

2.1  vue2写法

2.2  vue3写法

3  state

3.1  声明数据

3.2  使用数据

3.3  处理数据

4  mutations

4.1  基本使用

4.2  传递参数

4.3  mutations中不能写异步的代码

5  actions

5.1  基本使用

5.2  传递参数

6  getters

---

Vuex是做全局数据共享的，如果不使用vuex，每个组件的数据传来传去的很麻烦

我们下面通过vue3来使用vuex

1  安装

2  挂载

2.1  vue2写法

2.2  vue3写法

3  state

state是放数据用的

3.1  声明数据

声明的数据所有的组件都可以使用

3.2  使用数据

也可以用下面这种方式使用数据，下面这种方式感觉麻烦一些

3.3  处理数据

你可以这样搞

这样搞是可以生效的，点击按钮后something的值会+1

但是vuex不建议你这样搞，因为这样你会把函数定义的哪里都有，你改起来很麻烦。vuex建议你使用mutations

4  mutations

4.1  基本使用

mutations存放 操作state中的数据的函数，函数不能包含异步操作，我们做个例子

先在mutations中定义改变something的函数

然后在组件中使用

最后把组件在app中渲染

4.2  传递参数

定义

用

可以成功实现效果

用下面这种方法也可以在组件中使用mutations，相较于上面的方法我觉得麻烦了一些

4.3  mutations中不能写异步的代码

我们写一个看看

点击按钮过1s后，虽然页面上的值改变了，但是state中的值没有改变

如果你要执行异步操作，你需要使用action

5  actions

5.1  基本使用

action存放 操作state中的数据的函数的异步操作部分，action如果想操作state中的数据，只能配合mutations使用，我们做个例子

• 如果你不操作state中的数据就不用配合mutations，比如就单单发一个axios请求

在点击按钮的1s后，页面上的值发生了改变，state中的值也发生了改变

5.2  传递参数

像我们上面的例子就把 88 写死了，这样不是很好用，如果要通过action传递参数，我们可以这样写

1s后页面上的值改变了，state中的值也改变了

用下面这种方法也可以在组件中使用actions，相较于上面的方法感觉麻烦了些

6  getters

getters相当于是vuex中的计算属性，你可以在getters对state的值进行加工，我们做个例子

定义getters

使用getters

打开后是这样的

点击一下按钮getters的值也会发生相应的改变

也可以用下面这种方法在组件中使用getters，相较于上面的方法，下面的就麻烦了些