VUEX状态机简单使用

1.Vuex

vuex是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括state,actions,mutations,getters和modules 5个要素

主要流程 组件通过dispatch到actions,然后actions是异步操作，再actions中通过commit到mutations,mutations再通过逻辑操作改变state,从而同步到组件，更新其数据状态。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex是一个状态管理模式，状态机，将组件共享的数据放到状态机中统一管理，组件想拿数据可以从自己的数据模型中拿，也可以从仓库中拿，把vuex理解成一个仓库.

假设A组件想要那B组件里面的数据

把A组件和B组件的数据放到Vuex中 A组件想要获取B组件数据从vuex中拿 B组件想要获取A组件的数据从Vuex拿

State
在`State`中存放状态，可将状态理解为组件中的`data`，只不过在`state`中一般存放的是组件共享的数据，而在组件内的`data`中一般存放组件的私有数据。
Getters
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：

{
    //状态存储的位置
    state:{
        msg:'hello'
    }，
    getters:{
        //获取 可以获取到state中的数据进行处理再输出--派生自state
        msgUpper(state){
            msgUpper(state){
                return state.msg.UpperCase()
            }
        }
    },
       //突变 同步操作 唯一修改state数据的一种方式--就是用来修改state数据的
    mutations:{
         // 默认传递state，类似于事件event payload载荷 形参
        changeMsg(state,payload){
            state.msg=payload
        }
    }
    //动作 可以放异步
    actions:{
        //sto是一个类似仓库对象的对象 payload传递的参数
        getAll(sto,payload){
            假设通过异步请求之后向后台获取到了res,要设置到state中,修改state只能通过mutations提交突变
            let res=[];
            //提交突变
            //第一个参数是触发突变的事件名称 第二个参数是获取到的后台数据
            sto.commit('changMsg',res);
            //分发动作
            //第一个参数是分发动作的事件名称，第二个参数是要传递的数据
            sto.dispatch('getAll',[])
        }
    }
}

//1.声明一个仓库配置对象--普通的对象 帮仓库做配置的对象
let storeConf={
    state:{},
    getters:{},
    mutations:{},
    actions:{}
}
//2.通过Vuex的构造函数Store生成一个仓库
let store=new Vuex.Store(storeConf);
//3.注册到Vue实例中--将状态机和vue实例进行绑定
new Vue({
    store
})

### js代码
<script>
        // 仓库配置对象
        let storeConf={
            state:{
                storeMsg:'仓库里的msg数据'
            },
            getters:{
                storeMsgUpper(state){ //第一个参数是默认参数
                    return state.storeMsg.toUpperCase()
                }
            },
            mutations:{
                // 突变  修改state中的数据 payload提交突变时候传递的数据 第一个参数是默认参数
                changeMsg(state,payload){
                    state.storeMsg=payload
                }
            },
            actions:{
                // 分发动作 sto类似于仓库对象的对象 第一个参数是默认参数
                getMsg( {commit,dispatch,mutations,actions},payload){
                    // console.log(sto,payload)
                    commit('changeMsg',payload)
                }
            }
        }
        //2.生成一个仓库
        let store=new Vuex.Store(storeConf)
        new Vue({
            el:"#app",
            // 注册仓库
            store,
            data:{
                msg:'我是父组件'
            },
            created(){
                console.log(this.$store.state)
                console.log(this.$store.getters)
                // console.log(this.$store.mutations)
                // console.log(this.$store.actions)
            }
        })
    </script>
### html代码
<div id="app">
        {{msg}}
        <br>
        {{$store.state.storeMsg}}--------
        {{$store.getters.storeMsgUpper}}
        <button @click='$store.commit("changeMsg","test")'>提交突变</button>
        <button @click='$store.dispatch("getMsg","terry")'>分发动作</button>
    </div>

2.组件绑定的辅助函数

Vuex提供的组件辅助函数

mapState()

为组件创建计算属性以 为组件创建计算属性以返回 Vuex store 中的状态。 第一个参数是可选的，可以是一个命名空间字符串。

mapGetters()

为组件创建计算属性以返回 getter 的返回值 ​ 第一个参数是可选的，可以是一个命名空间字符串。

mapActions()

创建组件方法分发 action。 返回的结果是一个对象

mapMutations()

创建组件方法提交 mutation 返回的结果是一个对象

computed:{
                // ...Vuex.mapState(['storeMsg']),
                // ...Vuex.mapGetters(['storeMsgUpper']),
                ...mapState(['storeMsg']),
                ...mapGetters(['storeMsgUpper']),
​
            },
 methods:{
                // ...Vuex.mapActions(['getMsg']),
                // ...Vuex.mapMutations(['changeMsg'])
                ...mapActions(['getMsg']),
                ...mapMutations(['changeMsg'])
}

3.Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。namespaced表示设置命名空间

仓库里有多个个配置对象
let aModule={
    namespace:true,
    state:{}
}
let bMosule={
    namespace:true,
    state:{}
}
let store=new Vuex({
    modules:{
        a:aModule,
        b:bModules
    }
})

​