VUEX 的学习

一:vuex就相当于一个仓库，某个人想去拿东西就统一去仓库拿。集中管理，比较好维护。

1：state:{ str:'a',num=1} 在这里面定义数据。在其他组件里面拿到这个数据:{{$store.state.str}}

2:或者在组件里面导入

import{mapState,mapGetters} from 'vuex' //可以多写注册

在computed:{

...mapState(['str']) ...mapGetters([''changeste1])

}

这里相当于定义了一个data 在div里面直接 {{str}} 就可以拿到数据

对比 : 相当于是从仓库直接拿过来的一个原始数据，要直接调用，所以是可以改变仓库的数据的。

但是第二种就直接复制了一份过来，对仓库的数据没有改变。

二:getters:{

里面是函数

changeStr1(){

return abcd；

}

}

调用方法:1:在getters里面注册了函数之后 其他组件的this可以接收到这个函数 所以取值方式 :this.$store.getters.changeStr1 (标签可以不加this 方法必须加)

               2:impor {mapGetters} from 'vuex'

                   computed:{

                     ...mapState(['changeStr1'])

                               }

三:mutations:就可以做计算方法之类的

mutations:{

add(state){     // 拿到state里面的数据 然后开始加1 还可以传值 add(state,value) 

                           //然后在组件所绑定的@click='add()'里面传 通过value接收

state.num++

}

}

调用方法:

1.直接在组件的div里面绑定  例如绑定按钮 然后触发这个函数  不过还是要state有数据 然后在组件里面还调用了这个num 就是import之类的引入 然后

computed：{

...mapState(['num'])//就是注册用的

},//这里是注册了数据

methods:{

...mapMutations(['add']) //注册方法

}

2.还可以通过 this.$store.commit()提交mutation

四.actions：也是存放方法的

使用方法

1.  一：现在vuex里面注册

actions:{

total( {commit,state} ){

state.num++

}

}

二：在组件里面注册引入

import {mapActions} from 'vuex'

export default{

methods:{

...mapActions(['total])

}

}

三：在div里面绑定一个@click='total' 然后使用

2.先是btn绑定 this.$store.dispatch('total',10)

然后在actions{

total({commit,state},value){//value=10

}

}

mutations和actions区别:都是可以写方法的，调用方式但是提交方式不同。

1.mutation可以通过commit提交

actions通过dispatch提交

2.mutation是同步函数 actions是包含异步，state改变mutation是捕捉 不到state的变化，但是mutation可以。

3.action可以修改state属性值 但是一般是mutation修改 然后通过action提交

五.把单元模块再次细分。比如一个小区不同的单元按批做核酸，一单元先，然后二单元，三单元...

1.在module的index.js文件引入 import shop from './modules.shop'

2.在shop.js这个单元模块下 先暴露接口 export default{ state:{ list:[1,2,3]} }

3.然后在组件里面调用这个模块

import{mapState} from 'vuex'

computed:{

...mapState({

shop:state=>state.shop.list,         //还可以写多个

组件自定义的命名:state=>state.模块.具体属性名

})

}

然后就可以直接在div里面 {{shop}}

方法的触发后的结果的顺序会有改变，是根据index.js所导入的先后顺序，先导入的先执行

vuex的持久化存储:某一个组件使用了vuex的数据，把1修改成了2，但是页面刷新又修改到了1，怎么解决？

vuex是一个集中式状态的管理工具，本身不是持久化存储。

实现方式:使用localStorage

mutations:{

localStorage.setItem('num',state.num)

}

state:{

num:localStorage.getItem('num')|| 1    //有localstorage就拿num  否则就是1

}

2.使用插件

在某个组件可以直接修改vuex的state吗？

1）.通过mutations

2）.通过组件直接修改 this.$store.state.shop.num='sadas' 相当于是修改vuex里面的state

不可以直接通过辅助函数修改

3.vuex的单向数据流还是双向数据流？

4.vuex的getters属性在组件中被v-model绑定会发生什么？

如果修改会报错，因为vuex是单向数据流。