Vue 2.0 初探（八）

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

npm install vuex

安装完毕，在项目中添加使用

import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todos: [],
    newTodo:{id:null,title:'',completed:false}
  },
  mutations: {
    get_todos_list (state, todos) {
      state.todos = todos
    },
    complete_todo(state, todo){
      todo.completed = !todo.completed
    },
    delete_todo(state, index){
      state.todos.splice(index, 1)
    },
    add_todo(state, todo){
      state.todos.push(todo)
    }
  },
  actions: {
    getTodos(store){
      Vue.axios.get('http://127.0.0.1/vue/test.php').then(response => {
        console.log(response.data)
        store.commit('get_todos_list', response.data)
      })
    },
    completedTodo(store, todo){
      Vue.axios.patch('http://127.0.0.1/vue/test.php').then(response => {
        console.log(response.data)
        store.commit('complete_todo', todo)
      })
    },
    removeTodo(store, todo, index){
      Vue.axios.delete('http://127.0.0.1/vue/test.php?id=' + todo.id).then(response => {
        console.log(response.data)
        store.commit('delete_todo', index)
      })
    },
    saveTodo(store, todo){
      Vue.axios.post('http://127.0.0.1/vue/test.php', {title: todo.title}).then(response => {
        console.log(response.data)
        store.commit('add_todo', todo)
      })
      store.state.newTodo = {id:null,title:'',completed:false}
    }
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  template: '',
  components: { App },
  router
})

这就好像添加了一个全局的变量 store,后面我们可以直接调用了，而且可以不再使用之前那种 prpo 的传值方式

在App.vue中

mounted() {
    this.$store.dispatch('getTodos')
  },
computed: {  //处理页面中展示的一些数据
    todoCount(){
      return this.$store.state.todos.length;
    }
  },

在Todos.vue中

export default{
    name : 'todos',
    computed: {  //处理页面中展示的一些数据
        todos(){
            return this.$store.state.todos;
        }
    },
    methods: {
        deleteTodo(index, todo){
            this.$store.dispatch('removeTodo', todo, index)
        },
        togoCompleted(todo){
            this.$store.dispatch('completedTodo', todo)
        }
    },
    components: {
        TodoForm
    }
}

在TodoForm.vue中

export default{
    computed:{
        newTodo(){
            return this.$store.state.newTodo
        }
    },
    methods: {
        addTodo(newTodo){
            this.$store.dispatch('saveTodo', newTodo)
            this.newTodo = {id:null,title:'',completed:false}
        }
    }
}

这样看更清晰了，最后再看一下流程图