vuex介绍

一、什么是vuex：状态管理模式

通俗：集中式存储管理
存储的东西有哪些：全局共享的属性、全局贡献的方法…

二、vuex的使用场景（为什么要用？）

2.1 很多组件共同使用某一个值的时候（组件传值有可能很繁琐，所以直接用全局共享属性比较方便）
2.2 数据统一管理好维护

vuex中的属性

state ===> 有点像组件的data就是来存放共享数据的
使用1：this.$store.state.xxx
使用2：使用辅助函数

        <script>
        import {mapState} from 'vuex'
           export default{
              computed:{
                 ...mapState(['str1'])
              }
           }
        </script>

​ 调用：{{str1}} 或 this.str1

     以上两种方式有什么区别？
        1. this.$store.state.xx ===> 其实是在$store本身里面找到的属性值
        2.辅助函数的形式 ===> mapState会把state的某一值拷贝一份给vue当前组件的对象
         this.$store.state.xxx 可以直接修改
         this.xxx 不可以直接修改

getters ===> 有点像组建的computed放计算state属性的
使用1：this.$store.getters.changeStr1
使用2：辅助函数的形式

     因为vuex是单向数据流，所以 v-model 绑定 getters 会报错，而且没有get和set的写法（组件是有的）

mutations ===> 有点像组件的methods放全局共享方法
使用1：辅助函数形式

     <template>
        <div class="home">
           <p>首页</p>
           {{ num }}
           <button @click="add(10)">增加</button>
        </div>
     </template>
     <script>
        import {mapMutations } from "vuex";
        export default {
           name: "HomeView",
           methods: {
              ...mapMutations(['add'])
           },
        };
     </script>

​ 使用2：通过commit提交mutations
​ this.$store.commit(‘add’,20)
​ 这种形式是store来提交mutations

actions ===> 和mutations方法有点类似，actions也是用来存放方法的
使用1：
actions: {
total({commit,state}){
state.num ++
}
},
使用2：
this.$store.dispatch(‘total’,20);
方法总结：mutations 可以通过 commit 来提交
actions 可以通过 dispatch 来提交
mutations和actions的区别：

     1. actions可以直接修改state中的数据？可以，但是不建议
              2. 同步/异步
        mutations 是同步函数
        actions 是可以包含异步的

modules ===> 把整个状态管理再次细分
computed:{
…mapState({
组件定义的属性名:state=>state.模块.具体属性名
})
}

vuex持久化存储

vuex是个集中式状态管理工具，本身不是持久话存储，如果要实现持久化存储可以：
1.自己写localStorage
2.使用插件：
https://www.xuexiluxian.cn/blog/detail/beebe5210b54417cb061f9e8b515bbba

某个组件中可以直接修改vuex的状态吗？

可以的方式：
1.通过mutatios方法来修改
2.组件直接修改vuex的数据源 this.$store.state.xxx = ‘xxx’
不可以的方式：
1.直接使用辅助函数
this.num ===> 这种情况是不可以的

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

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

vuex是单向数据流还是双向数据流？

单向数据流