vuex具体使用

vuex 持久化数据 ****

作用：解决vuex的一个痛点，就是你当使用vuex，页面中进行刷新，那么你操作之后的状态，都还原了，初始状态

1. 下载安装 ： cnpm install vuex-persistedstate 持久化数据插件
2.找到store文件夹下面的index.js，在你的store实例中：
    // 与state，mutations同级
    plugins: [createPersistedState()]  //加上这个就可以了
3.当你去使用vuex中state数据时，发生改变时，他就会进行存储

vuex中都有哪几个核心

1.state      // vuex 中得全局状态，在任何组件都可以拿到
2.mutations  // vuex 中得改变状态得方法集合
3.getters    // vuex 中得计算属性
4.actions    // vuex 中得异步方法
5.moudles    // vuex 中得数据模块化

#vuex 中的state 储存的全局状态

  state:{
        count:0
    }
    想去修改state中的属性，那你需要定义一个同步方法
    mutations：{
        changeCount(state,str) {
            if(str == "+") {
                state.count++
            } else {
                state.count--
            }
            
        }
    }

##vuex中actions的使用
工作流程：
1. 想要请求数据，你可以写在actions里，请求数据

 actions:{
            cnodeAjax(context) {  // context,理解成store实例给我们提供的一些方法
                axios.get("https://cnodejs.org/api/v1/topics").then((res)=>{
                    context.commit("changeCnode",res.data.data)
                })
            }
        }

    2. 请求回来之后，调用同步方法
        context.commit("changeCnode",res.data.data)
    3. 同步方法改变状态
        // 同步state中cnodearr状态
        changeCnode(state,res) {
            state.cnodeArr = res
        }

    调用actions方法：this.$store.dispatch("actions方法名")

vuex中的getters *****

vuex中的getters，相当于vue组件中得计算属性
在store中 getters对象，就相当于 页面中计算属性
1.定义：

  getters:{
        sum(state) {
            let sum = 0
            state.arr.forEach((item)=>{
                sum += item
            })
            return sum
        }
    }
    2.在计算属性中：computed:{
        sum () {
            return this.$store.getters.sum
        }
    }

##辅助函数
##mapState:
它可以快速取到vuex中state中的某一个状态
在计算属性中：

…mapState([“number”,“count:”]) // 数组形式的

…mapState({number:“number”})

` // 对象形式的，对象的key就是你当前页面使用的全局状态名字，值就是对应得仓库中的属性
###mapMutations:
他可以快速得取到vuex中mutations中方法
在methods:

...mapMutations(["changeNumber","changeLoading"])  // 数组形式

   ...mapMutations({changeNum:"changeNuber"})         // 对象形式

的，对象的key就是你当前页面使用的方法，值就是对应得仓库中mutations的方法

mapAcitons:

    在methods：
        ...mapActions(["condeAjax"])   // 数组形式得
        ...mapActions({code:"condeAjax"})   // 对象形式得   # mapGetters：
    在计算属性中：
        ...mapGetters(["定义好得getters方法"])   // 数组形式
        ...mapGetters({"定义一个组件当前想用得名字","定义好得getters方法"})  // 对象形式

vuex 中 moudles （模块）

    就是将state 模块化
在你得store实例中

moudles:{
    catMoudle:{
        namespaced:true,   // 开启命名空间
        state:{
            cat:"波斯猫"
        },
        mutations:{
            say() {

            }
        },
        actions:{
            getFood(context) {
                setTimeout(()=>{
                    context.commit("changeEat","小鱼")
                },2000)
            }
        }
    },
    dogMoudle:{
        namespaced:true,   // 开启命名空间
        state:{
            dog:"哈士奇"
        },
        mutations:{
            say() {
                
            }
        },
        actions:{
            getFood(context) {
                setTimeout(()=>{
                    context.commit("changeEat","小鱼")
                },2000)
            }
        }
    }
}

this.$store.commit("dogMoudle/say")       // 调用带有命名空间的同步方法

this.$store.dispatch("dogMoudle/getFood") // 调用带有命名空间的异步方法

使用辅助函数，快速取到 模块化仓库中的数据
在计算属性中:
    ...mapState("模块化命名空间名字",["cat"])     // 数组形式，直接取到仓库中的变量，直接使用
    ...mapState("模块化命名空间名字",{cat:"cat"}) // 对象形式得，对象形式，你可以重新命名，然后在当前组件中，使用该名字

mapMutations:
    在methods中:
        ...mapMutations("模块化命名空间名字",["changeCat"])     // 数组形式，直接取到仓库中的变量，直接使用
        ...mapMutations("模块化命名空间名字",{catFn:"changeCat"}) // 对象形式得，对象形式，你可以重新命名，然后在当前组件中，使用该名字
    
mapActions:
    在methods中：
        ...mapAcitons("模块化命名空间名字",["getFood"])   // 数组形式，直接取到仓库中的变量，直接使用
        ...mapAcitons("模块化命名空间名字",{getFood:"getFood"}) // 对象形式得，对象形式，你可以重新命名，然后在当前组件中，使用该名字