Vuex的有哪些属性？用处是什么？

Vuex是一个专为Vue.js框架设计的状态管理库。它使用了集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方法发生变化。Vuex具有以下属性：

1. State（状态）： VueX存储的状态定义在一个单一的state树中，这使得它容易查找和调试.vue组件的所有状态都可以从这个状态树中获得。
2. Getters（getters）：他们是store的计算属性，我们可以把它想象成 vue 组件中的 computed（计算属性），Getter 接受 state 作为其第一个参数。
3. Mutations（mutation）：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
4. Actions（actions）：类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。注定使用Action的核心原因在于我们需要把 非同步操作 （如 Ajax 请求放）到这里面。

上述属性的用处是：

State: 存储和管理应用程序级别的状态，即应用程序中的所有数据。

Getters: 从存储状态中派生出状态，对状态进行更改，过滤或组合等作用。在有些地方我们需要对 store 中的状态进行 计算处理后再返回，比如根据 Store 中数据的计算满足一个特殊的需求。

Mutations: 更改 Vuex 的 store 中的状态，同步执行，令store的内容发生变化。

Actions: 可以包含任意异步操作，可以执行 mutations 从而改变 Vuex 的 store 中的状态。Action 类似于在 Vuex 中进行异步操作的方式，用于封装提交 mutation 的过程。例如，从服务器请求数据后将数据提交到 mutation 来更新状态

下面是一个示例来说明Vuex属性在一个简单的Vue应用中的应用：

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        count: 0,
        todos: [
            {id: 1, text: 'Todo 1', done: true},
            {id: 2, text: 'Todo 2', done: false},
            {id: 3, text: 'Todo 3', done: true}
        ]
    },
    mutations: {
        increment (state) {
            state.count++;
        },
        decrement (state) {
            state.count--;
        },
        toggleTodo (state, todo) {
            todo.done = !todo.done;
        }
    },
    actions: {
        incrementAsync ({commit}) {
            setTimeout(() => {
                commit('increment');
            }, 1000);
        },
        toggleTodoAsync ({commit}, todo) {
            setTimeout(() => {
                commit('toggleTodo', todo);
            }, 1000);
        }
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done);
        },
        unfinishedTodos: state => {
            return state.todos.filter(todo => !todo.done);
        }
    }
});
Vue.component('TodoItem', {
    props: ['todo'],
    template: `
        <li>
            {{ todo.text }}
            <button v-on:click="toggleTodo">Toggle Todo</button>
        </li>
    `,
    methods: {
        toggleTodo: function () {
            this.$store.dispatch('toggleTodoAsync', this.todo);
        }
    }
});
new Vue({
    el: '#app',
    data: {},
    store,
    computed: {
        count: function () {
            return this.$store.state.count;
        },
        doneTodos: function () {
            return this.$store.getters.doneTodos;
        },
        unfinishedTodos: function () {
            return this.$store.getters.unfinishedTodos;
        }
    },
    methods: {
        increment () {
            this.$store.commit('increment');
        },
        decrement () {
            this.$store.commit('decrement');
        },
        incrementAsync () {
            this.$store.dispatch('incrementAsync');
        }
    }
});

这个示例演示了Vuex store中的属性。在store中的state属性存储了计数器值和待办事项的列表。mutations用于同步更改store中的状态。actions中的incrementAsync和toggleTodoAsync对应于异步操作，利用setTimeOut方法并调用mutations以改变store中的状态。getters可以派生出计算状态；在上例中，我们利用它返回待办事项的数组。最后，Vue组件通过理解它作为store.getters和store.dispatch方法在计数器上调用组件方法更新状态。

火焰兔

海报 链接