目录
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,相较于上面的方法,下面的就麻烦了些