vuex

State

保存的状态，公有数据

Getters

提供获取数据的方式

Mutations

改变-改变数据

Actions

行为，封装调用改变的发生

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

Modules

模块（以上配置的封装）

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

vuex

当需要CRUD的时候

1-在程序内调用actions->添加用户行为

2-调用添加用户的mutations里面的某一个改变行为

3-操作数据的方式改变state.属性

getters（获取数据）

state.xxx也可以获取数据，但是不推荐

//main.js

import App from './app2.vue';
//引入vue
import Vue from 'vue';

//引入vuex
import Vuex from 'vuex';
//安装插件   未来this.$store能够拿到总体的仓储对象 该对象可以直接.state拿数据
Vue.use(Vuex);
let userOptions = {
    state: { //数据
        users: [{ name: 'jack', age: 18 }, { name: 'rose', age: 17 }]
    },
    mutations: { //发生改变CRUD
        add(state, data) {
            state.users.push(data);
        },
        edit(state, data) {
            state.users[data.index].name = data.name;
        },
        del(state, index) {
            state.users.splice(index, 1);
        }
    },
    actions: { //行为，代码中会涉及到业务 
        addUser({ commit }, user) {
            //content 相当于$store也可以提交.commit .state
            commit('add', user)
        },
        editUser({ commit }, user) {
            commit('edit', user);
        },
        delUser({ commit }, index) {
            commit('del', index);
        }
    },
    getters: { //获取数据,结合computed来一起使用
        users(state) {
            return state.users;
        }
    }
}



//配置仓储的数据
let store = new Vuex.Store({
    modules: {
        //模块名:模块配置
        userOptions,
    }
});


//将该对象配置进Vue实例options中
new Vue({
    el: '#app',
    store,
    render: c => c(App)
})

//app.vue

<template>
    <div>
        <input type="text" name="" v-model="user.name">
        <input type="text" name="" v-model="user.age">
        <button @click="addUser">添加用户</button>
        <ul>
            <li v-for="(user,index) in getUsers" :key="index">
                {{user.name}} {{user.age}} <a @click="edit(index)">编辑我</a> <a @click="del(index)">删除我</a>
            </li>
        </ul>
        <!-- 模块方式以后，只有单独获取state的数据需要额外增加模块名 -->
        {{$store.state.userOptions.users}}
    </div>
</template>
<script>
export default {
    data() {
            return {
                user: {} //用来添加用户
            }
        },
        methods: {
            addUser() {
                //分发,有时处理异步任务的时候，$store直接commit，该行为无法完成记录，这种方式是ok的
                this.$store.dispatch('addUser', this.user);
            },
            del(index) {
                this.$store.dispatch('delUser', index);
            },
            edit(index) {
                //编译的时候，由于添加或者删除元素了，索引就会不准确，最好使用id来编辑
                this.$store.dispatch('editUser', {
                    index,
                    name: '已经修改'
                });
            }
        },
        computed: {
            getUsers() { //结合computed优雅的获取数据
                return this.$store.getters.users;
            }
        }
}
</script>
<style>
</style>