vuex

 

vuex定义：全局状态管理

 

vuex的使用流程

1、是vue的插件，需要安装

     npm i vuex -S

2、在src中创建store文件夹，在store文件夹中创建store.js/index.js

3、在store.js中引入vuex文件，并导出vuex实例，调用store方法

4、在main.js中引入store.js文件，并在vue实例中声明

 

导出vuex实例，调用vuex的store方法

export default new Vuex.Store({     state,     getters,     actions,     mutations })

state：管理数据的对象，相当于data

getters：管理计算属性的对象，相当于computed

actions：包含多个间接更新数据的函数的对象

mutations：包含多个直接更新数据的函数的对象

 

actions与mutations的区别：

actions不能直接更新数据，mutations直接更新数据

actions可以处理同步或异步的代码，mutations只能处理同步的代码

修改state必须在mutations里面

补充：若就在 actions 里修改 state 可以吗？可以，但不符合官方规定，并且，若开启严格模式则会报错。（严格模式：use strict）

 

vuex的工作流程：

state 数据绑定到组件上，组件触发 dispatch 调用 actions 里的方法，actions 调用 commit 触发 mutations 里的方法，mutations 里修改 state，state 一改变就会自动更新组件里的使用

  补充：如果问道 getters，一旦 state 被修改，那么 getters 会被触发，它的功能和 vue 组件里的 computed 一样，用来过滤和加工 state 数据

 

**辅助函数**

引入

import {mapState,mapGetters,mapActions,mapMutations} from "vuex"

语法糖：

1、mapState:把state中的数据映射到当前组件上

语法：

    普通：...mapState(['state中的数据属性'])

    起别名：...mapState({别名:原名})

    函数：...mapState({state => state.count})

作用：减少计算属性中的代码量

 

2、mapGetters：映射vuex中的getters到当前组件上

语法：...mapGetters(['getters中的数据属性'])

别名：...mapGetters({别名:原名})

 

3、mapActions：映射vuex中的actions方法到当前组件的methods中

语法：...mapActions(["actions中的函数名"])

 

4、mapMutations：映射vuex中的mutations函数到当前组件的methods

语法：...mapMutations(['mutations的函数名'])

 

过滤器

作用：用于一些常见的文本格式化

用法：由“管道”符号指示

1.双花括号插值

2. v-bind 表达式

 

 

如果刷新vuex数据会丢失，如何解决？

本地存储或下载第三方插件：vuex-persist