vuex开发SPA应用

· 2017-01-15 · # Vue

在使用vueJs开发SPA应用时官方也提供了我们解决方案就是vuex 他就是使用状态管理机制去实现数据的更新

1.安装vuex

文档:http://vuex.vuejs.org/en/

来到我们的github上面打开我们的文档开始安装:

$ npm install vuex --save

当然来到我们的main.js去引入vuex

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

2.处理业务

1.其实最主要的我们是去理解官方所示的流程图

我们可以先从提供的demo开始:

还是去main.js文件加入官方提供的demo:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

还是以任务管理系统为应用场景这时我们在去定义我们的vuex(这时最后的业务代码):

const store = new Vuex.Store({
  state: {
      todos:[],
      newTodo: {
        id: null,
        title: '',
      }
  },
  mutations: {
    get_todos_list (state,todos) {
      state.todos = todos
    },
    delete_todo(state,index){
      state.todos.splice(index,1);
    },
    add_todo(state,todo){
      state.todos.push(todo);
    }
  },
  actions:{
    getTodos(store){
      Vue.axios.get('http://localhost:8000/api/todos').then(response=>{
        store.commit('get_todos_list',response.data);
      });
    },
    removeTodo(store,payload){
      console.log('pindex = '+payload.index);
      Vue.axios.delete('http://localhost:8000/api/todo/'+payload.todo.id+'/delete').then(response=>{
        store.commit('delete_todo',payload.index);
      });
    },
    saveTodo(store,todo){
      Vue.axios.post('http://localhost:8000/api/todo/create',{'title':todo.title}).then(response=>{
        console.log(response.data);
        store.commit('add_todo',response.data);
      });
      store.state.newTodo = {id: null, title: '', completed: false}
    }
  }
})

需要说明的是:

**mutations**可以理解成在有了后端数据后去处理我们前端的数据内容
**actions**则是去实现方法的具体业务逻辑他负责去与我们后端的数据进行交互在每个component可以dispatch一个action
比如触发了一个更新操作

理解起来即使component也可以说是一个视图里去dispatc一个action , action里面就是和后端去进行交互 ,
得到或者更新数据之后再commit 一个mutation 这样一来mutation就会去改变了state里面的数据 ,
而一旦我们state里面的数据发生改变它就会去渲染我们的Vue Components

还有要说明的就是前后端数据肯定是统一的那么在vuex里后端数据的操作就是通过action去实现的而前端的数据就是通过mutation去改变state里面的
数据这样前后端就统一起来了

而state里面的数据是每个组件都可以访问这和我们通常的全局变量的功能差不多当我们的项目越来越大的时候我们的store也会变得十分臃肿

维护起来也十分困难那么我们可以将store分成几个module 每个module有相当于一个store 因为它有自身的
state、mutation、action、getters

举个例子来说就是

我们在App.vue里面去触发一个action:

export default {
  name: 'app',
  mounted(){
    this.$store.dispatch('getTodos')
   },
}

就是在生成页面时dispatch了一个action: getTodos

getTodos(store){
      Vue.axios.get('http://localhost:8000/api/todos').then(response=>{
        store.commit('get_todos_list',response.data);
      });
},

getTodos去从后端拿到了所有的任务数据然后它commit了一个get_todos_list的mutation:

get_todos_list (state,todos) {
      state.todos = todos
},

get_todos_list将从后端得到的数据赋予给了我们state里面的todos:

state: {
      todos:[],
      newTodo: {
        id: null,
        title: '',
      }
},

state的todos的内容改变后就会去渲染我们的Vue Components
我们就可以看到页面的数据信息发生改变这样也就完成用户和数据的交互过程

当然除了Actions ， Mutations 还有Getters

这里的Getters会从store的对象的state派生出一些其他的状态

这个理解起来可以是是对原本state的进行一个再生和过滤

比如我们需要其中的一个状态的数据长度(这也是官方给出的一个实例)

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

由于我们声明了这个getter 而我们是可以获取Getters 的 store.getters 对象：

因此我们在需要时可以以这种方式去得到这样的派生出来的一种数据

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

最后还有一个核心的概念就是Modules 举个例子来说项目里有很多的Service那么我们完全可以将这些Service分离开来

在index.js里我们就可引入其他的Modules

import Vue from 'vue'
import Vuex from 'vuex'

import PlayService from './PlayService'
import ApiService from './ApiService'
import NotifyService from './NotifyService'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    PlayService,
    ApiService,
    NotifyService
  }
})

这里只是其中的一个实例

对于vuex的使用最好还是官方推荐的架构形式

以我的一个项目为例来说吧就是将各个工作模块区分开来

我们可以直接去引用我们index.js作为入口具体的怎么实现我可能需要重新在一篇文章中去写到

参考资料:

http://vuex.vuejs.org/en/