Vue 状态管理

vuex的基本学习

 

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

https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart

store.js: 

import Vue from 'vue'
import Vuex from 'vuex'
import tasks from './modules/tasks'
import mutations from './mutations.js'
import * as actions from './actions'
import * as getters from './getters'
import * as state from './state.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    tasks
  },
  state,
  getters,
  actions,
  mutations
})

export default store

actions.js

/**
* action 是一种专门供vue组件调用的事件库,它的职责是 通过调用指定的mutations 函数来触发对 state 的更新。
* 特性：actions支持异步操作；mutations只能进行同步操作。
* 也许会有这个疑问：为什么不直接调用 actions 来更新 state， 而需要一个中间人 mutations 来更新state？
* 引用官方的一句话来回答：
* 【再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。
由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutations。】
* 
* 话虽如此，但在state进行异步后跳过mutation直接更新state也是可行的。
* 所以，我们约定，只有产生异步的操作，才需要使用mutation。（严格模式下，该方式是不行的。）
* 使用严格模式：
* const store = new Vuex.Store({
        // ...options
        strict: process.env.NODE_ENV !== 'production', // 在非生产环境下，使用严格模式
    })
*/
import * as type from './mutation-types.js'

// 设置是否显示加载中
export const set_loading = ({commit}, b) => {
    commit(type.IS_LOADING, b);
}

getter.js

/**
 * getter 是一种专门供vue组件调用的函数,它的职责是获取vuex中的state
 * getter 的职责是从state中获取并且返回值
 * 必须是 return 才可以在 $store 中获取
 */
 export const backPath = ( state ) => state.base.backPath;

mutations.js 

import * as type from './mutation-types.js'

const mutations = {
    [type.IS_LOADING] (state, b) {
        state.is_loading = b;
    }
}

export default mutations;

mutations-type.js

export const RECEIVE_TASK_LIST = 'RECEIVE_TASK_LIST'
export const IS_LOADING = 'IS_LOADING'

 

使用的套路：

// 自己探索出来的方式
created () 
{      
　　　// 调用actions   　　         
     this.$store.dispatch('set_back_path',"abc123").then(function(){
      　　// ...
  　　})　　　

    　// 调用getters
      console.log(this.$store.getters.backPath) 
}

// 获取state并且绑定
computed: {
　　is_loading () {
　　return this.$store.state.is_loading
　}
}

// 我个人更喜欢这种通用的,这里的./store/index.js导出的是Vuex.store实例
import store from './store/index.js'
store.dispatch('set_back_path', fromPath);  // 调用actions

 

其他套路1：如果管理的状态不需要进行异步请求，那么可以不需要使用Mutations. 以一个简单的AppData模块为例：

import fetch from './../../fetch/api.js'
import * as types from '../mutation-types'

let state = {
    AppData: {
        "Ip":null,
        "SystemName":null,
        "Version":null,
        "Token":"3768645a-1433-11e6-a74c-02004c4f4f50",
        "UserId":"3768645a-1433-11e6-a74c-02004c4f4f50"
    }
}

const getters = {
  AppData (state) {
    return state.AppData;
  }
}

const actions = {
  setAppData ({ commit, state }, data) {
    state.AppData = data;
  }
}

export default {
  state,
  getters,
  actions
}

可以看到actions中直接操作了state。不需要借助Mutations。但这种方式在严格模式下行不通

其他套路2：如果要在一些js文件中使用store、vuex的实例。只需要直接引入vuex的导出文件即可.

import store from '../store/index.js';

store.dispatch('set_fetch_count','-');

当然前提是你的store进行过vue.use(...)了

严格模式：

const store = new Vuex.Store({
    // ...options
    strict: process.env.NODE_ENV !== 'production', // 在非生产环境下，使用严格模式
})