1.Vuex概述
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享
使用Vuex管理数据的好处:
- 能够在vuex中集中管理共享的数据,便于开发和后期进行维护
- 能够高效的实现组件之间的数据共享,提高开发效率
- 存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新
2.Vuex的基本使用
创建带有vuex的vue项目,打开终端,输入命令:vue ui
当项目仪表盘打开之后,我们点击页面左上角的项目管理下拉列表,再点击Vue项目管理器
点击创建项目,如下图所示
第一步,设置项目名称和包管理器
第二步,设置手动配置项目
第三步,设置功能项
第四步,创建项目
3.使用Vuex完成计数器案例
打开刚刚创建的vuex项目,找到src目录中的App.vue组件,将代码重新编写如下:
1 | <template> |
在components文件夹中创建Addition.vue组件,代码如下:
1 | <template> |
在components文件夹中创建Subtraction.vue组件,代码如下:
1 | <template> |
最后在项目根目录(与src平级)中创建 .prettierrc 文件,编写代码如下:
1 | { |
4.Vuex中的核心特性
A.State
State提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储
例如,打开项目中的store.js文件,在State对象中可以添加我们要共享的数据,如:count:0
在组件中访问State的方式:
- this.$store.state.全局数据名称 如:
this.$store.state.count
- 先按需导入mapState函数:
import { mapState } from 'vuex'
然后数据映射为计算属性:computed:{ ...mapState(['全局数据名称']) }
B.Mutation
Mutation用于修改变更$store中的数据
使用方式:
打开store.js文件,在mutations中添加代码如下
1 | mutations: { |
然后在Addition.vue中给按钮添加事件代码如下:
1 | <button @click="Add">+1</button> |
使用mutations的第二种方式:
1 | import { mapMutations } from 'vuex' |
如下:
1 | import { mapState,mapMutations } from 'vuex' |
C.Action
在mutations中不能编写异步的代码,会导致vue调试器的显示出错。
在vuex中我们可以使用Action来执行异步操作。
操作步骤如下:
打开store.js文件,修改Action,如下:
1 | actions: { |
然后在Addition.vue中给按钮添加事件代码如下:
1 | <button @click="AddAsync">...+1</button> |
第二种方式:
1 | import { mapActions } from 'vuex' |
如下:
1 | import { mapState,mapMutations,mapActions } from 'vuex' |
D.Getter
Getter用于对Store中的数据进行加工处理形成新的数据
它只会包装Store中保存的数据,并不会修改Store中保存的数据,当Store中的数据发生变化时,Getter生成的内容也会随之变化
打开store.js文件,添加getters,如下:
1 | export default new Vuex.Store({ |
然后打开Addition.vue中,添加插值表达式使用getters<h3>{{$store.getters.showNum}}</h3>
或者也可以在Addition.vue中,导入mapGetters,并将之映射为计算属性
1 | import { mapGetters } from 'vuex' |
5. vuex数据持久化
默认情况下vuex中的数据是存储再内存中的,只要浏览器一刷新它就没了,会造成一些不好的体验,所以使用一些插件把vuex中的数据存储到localStorage或者sessionStorage。
- 安装
npm install vuex-persistedstate --save
- 在store下的index.js中配置,存储在sessionStorage
1
2
3
4
5
6
7
8
9
10
11
12
13import createPersistedState from "vuex-persistedstate"
conststore = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage:window.sessionStorage
})]
})
__END__

文章出处:vuex的使用总结
作者签名:简单地活着, 肆意又精彩.
关于主题:Hexo - Live For Code
版权声明:文章除特别声明外,均采用 BY-NC-SA 许可协议,转载请注明出处