​

1. state

          存储相关的数据，像组件中的data属性一样

代码如下（示例）：

       const store=new Vuex.Store({

            state:{                  //state存放数据

                num:0,

                msg:"hello",

                lists:[

                    {

                        id:1,

                        name:"张三",

                        sex:'男',

                        age:10

                    }

                ]

            }

            }

        })

使用state数据    $store.state.属性名

2. getters

        通过state里的数据，得到一个新的数据集合，一般用来筛选state里的数据

代码如下（示例）：

        getters:{

                自定义方法名(state){          这里的state表示仓库中的state

                        return      代码

                }

        }

使用得到的新的数据

        <元素标签名>$store.getters.自定义方法名</元素标签名> 

         例子：筛选出性别为“男”的信息 

    <div id="app">
        <p>{{$store.getters.filterSex}}</p>
    </div>
    <script src="./css and js/vue.min.js"></script>
    <script src="./css and js/vuex.min.js"></script>
    <script>
        const store=new Vuex.Store({
            state:{                  //state存放数据
                num:0,
                lists:[
                    {
                        id:1,
                        name:"张三",
                        sex:'女',
                        age:10
                    },
                    {
                        id:2,
                        name:"张三",
                        sex:'男',
                        age:15
                    },
                    {
                        id:3,
                        name:"张三",
                        sex:'男',
                        age:20,
                    },
                ]
            },
            getters:{            //获取state里的数据从而得到一个新的数据集合，像筛选state里的数据
                filterSex(state){
                    return state.lists.filter(lists =>lists.sex=="男")
                }
            }
        })
        new Vue({
            el:"#app",
            store            //将store挂载到vue中
        })
    </script>

---

3. mutations

        唯一能修改state中的数据的入口。

格式：

        mutations:{

                自定义方法名(state){

                        //代码块

                }

        }

想要调用store里边的mutations中的方法  需要使用

        this.$store.commit ("自定义方法名")

 例子：点击按钮实现数据的改变

    <div id="app">
        {{$store.state.num}}
        <button @click="change">修改数据</button>
    </div>
    <script src="vue.min.js"></script>      //引入vue.min.js
    <script src="vuex.min.js"></script>     //引入vuex.min.js
    <script>
        const store=new Vuex.Store({
            state: {
                num: 1
            },
            mutations: {
                changeNum(state) {
                    state.num=120
                }
            }
        })
        new Vue({
            el: "#app",
            store,
            methods:{
                change(){
                    this.$store.commit('changeNum')
                }
            }
        })
    </script>

4. actions

         一般用于数据的请求。

        第一步：使用actions请求到数据

        第二步：将请求到的数据放在state中

        第三步：调用mutations对state进行修改

格式

    actions: {

        自定义方法名() {

            异步请求

            一般情况下请求后台数据

        }

    }

我们需要使用$store.dispatch() 触发actions里边的方法

    $store.dispatch('自定义方法名')

5. modules

         对state、getters、mutations、actions进行分割，分割成模块使用

        modules: {

            自定义模块名: {

                state: {},

                getters: {},

                mutations: {},

                actions: {},

                modules: {}

            }

        }

        获取modules里模块的state中的数据

                $store.state.模块名.属性名

        获取modules里模块的getters中的数据

                需要给这个模块添加命名空间

                namespaced:true

               然后通过  this.$store.getters.模块名/方法名   获取数据

总结

        state：存储相关数据，当data使用

        getters：从state获取数据，得到新的数据集合

        mutations：唯一修改state数据的方式

        actions：进行异步操作，请求数据

        modules：进行模块分割

​