Vuex理解

Vuex的作用

作用就是一个数据仓库

**

基本的配置

**

**

state基本使用(数据)

**

组件访问数据的方式

可以再多个组件访问数据
方式一:

方拾二:

**

mapState原理

**

**

组件里面使用$store.state.属性名

这个bug出现的原因就是,在data里面可能重名.可以设置一个新的名字

...mapState({    "新名字"      :    "原来的名字"     })

Mutation 变异(修改state里面的数据)

**
这样做的结果 数据追踪很困难 特别是大型项目

mutation这样做的目的是让调试工具 知道每一次修改是哪个修改的

具体使用

1-在组件里面声明点击事件 调用函数methods
在methods里面
this.$store.commit (“事件函数名”)

2—返回到配置store的js文件里面 配置mutation

**

载荷(payload)

**
就是一种传参数的方式

在组件的methods里面 添加一个payload的对象 手动的传递参数

mutations里面接收到的数据就是 两个参数 一个数state 一个是payload对象

注意 :载荷只有一个 如果要传多个参数 就定义一个对象

**

action基本使用(异步操作)

**


为什么要将异步操作放在action里面呢?
原因在于 项目很大,不能放在一个小组件里面 这样效果不好

通过dispatch方式来调用action里面的异步请求,将结果 commit给mutations 这样就是一个同步的请求 再去修改state

actions函数里面第一个 参数 一定是context
第一步: 定义好actions

整体思路就是:
异步操作放在里面 参数是context 最终将结果

context.commit("add",payload)    

这样就是将异步请求的结果给了 mutations

简单来说就是:
点击事件 $store.dispatch(""js文件里面的actions变量名"") 调用actions里面的函数
异步操作的函数体 将结果通过 this.$store.commit(““mutations里面的函数””, payload)
异步请求来修改结果

载荷


前面的state context 其实就是帮助 mutations 和actions 来和上一级联系

**

getters基本使用

**

这个出现的原因是: 组件中要使用到计算属性 但是计算属性只能在一个组件里面使用 不能跨组件
这就是getter的由来

mapGetter辅助函数


出现的位置就是在
修改数据 实在计算属性里面
行为就是 在methods里面

**

module基本使用(大范围数据共享基础)

**

modules的作用

拆分模块，把复杂的场景按模块来拆开


注意: 两种方式 可以设置modules 文件夹 在里面设置模块
这里的

 namespaced：true            就只在使用的时候   前面要加上  模块名  
 namespaced：false           不需要加上模块名

在引入的子模块里面需要添加的是
state mutations getters actions
这四个

vuex-用modules之后代码结构优化

这个图的意思是: 在store这个文件夹里面 设置子模块
然后在主模块里面引入子模块文件 同时在modules 里面设置子模块的文件名字

**

在设置完子模块以后 调用的时候就会有一些变化

**

当前文件显示在子模块里面,
第一步:设置 namespacde:true
第二步: 写出前四个组件 state mutations getters actions
第三步:就是调用 添加模块名字以后,



这里做深度监听的目的就是 :
将原始数据存在localstorage里面,关闭网页第二次打开以后 还能看到数据
监听就是动态的将数据存在这里面,
下次开网页就不会报错
设置一个空数组的目的是 标签的v-for循环 可以使用空数组的属性 不至于报错