手写 Vuex4 源码

本文首发于掘金，未经许可禁止转载

Vuex4 是 Vue 的状态管理工具，Vuex 和单纯的全局对象有以下两点不同：

  1. Vuex 的状态存储是响应式的
  2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地 提交 (commit) mutation。

本文手写部分分为八个部分，基本包含了 Vuex 的功能。

  • 实现获取state并响应式修改state
  • 实现getters
  • 实现 commit 和 dispatch
  • 注册模块
  • 注册模块上的 getters，mutations，actions 到 store 上
  • 命名空间
  • 严格模式
  • 插件模式

准备工作

创建名字叫 vuex_source 的工程

vue-cli3 create vuex_source

上面命令和使用 vue create vuex_source 创建项目是等价的，我电脑安装了 vue-cli2 和 vue-cli3，在 vue-cli3里面修改了 cmd 文件，所以可以用上面命令。

手写 Vuex4 源码_第1张图片

选择 Vuex，使用空格选择或取消选择

手写 Vuex4 源码_第2张图片

手写 Vuex4 源码_第3张图片

启动项目如果如下图报错

手写 Vuex4 源码_第4张图片

可以试试输入命令

$env:NODE_OPTIONS="--openssl-legacy-provider"

手写 Vuex4 源码_第5张图片

基本使用

使用 createStore 创建一个 store

import { createStore } from 'vuex'

export default createStore({
  strict:true,
  state: {
    count:1
  },
  getters: {
    double(state){
      return state.count * 2
    }
  },
  mutations: {
    mutationsAdd(state,preload){
      state.count += preload
    }
  },
  actions:{
    actionAdd({commit},preload){
      setTimeout(() => {
        commit('mutationsAdd',preload)
      }, 1000);
    }
  }
})

main.js 中引入

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

在 app.vue 中使用 store

编写源码

实现获取state并响应式修改state

修改 App.vue 的引用，@/vuex 是需要编写的源码的文件夹

import { useStore } from "@/vuex"; // 之前是import { useStore } from "vuex";

修改 store 的引用

import { createStore } from '@/vuex'

在 src 目录下创建 vuex文件夹，里面添加 index.js

手写 Vuex4 源码_第6张图片

在 index.js 中添加 createStore 和 useStore 函数，createStore 用来创建 store，useStore 供页面调用

// vuex/index.js

class Store{
    constructor(options){
    }
}
// 创建 store，多例模式
export function createStore(options){
    return new Store(options)
}

// 使用 store
export function useStore(){}

createStore 创建出的store，在main.js 中 调用 use 方法

createApp(App).use(store)

use 会调用 store 的 install 方法，将 store 安装到 Vue 上，所以 Store 类中还需要添加 install 方法

const storeKey = 'store' // 默认一个 store 名

class Store{
    constructor(options){
    }
    install(app,name){ 
        // app 是vue3暴露的对象
        // 在根组件上绑定了 store，子组件要用到 store
        // 根组件就需要 provide 出去，子组件 inject 接收
        app.provide(name || storeKey,this)
    }
}

// 创建 store
export function createStore(options){
    return new Store(options)
}
// 使用 store
export function useStore(name){
    // inject 去找父组件的 provide 的东西
    return inject(name!==undefined?name:storeKey)
}

此时在 App.vue 中打印的就是一个空对象

// App.vue
const store = useStore()
console.log(store);

image.png

在 Store 类中绑定传进来的 state

constructor(options){
    this.state = options.state
}

打印就是

image.png

App.vue 中添加如下模板

上面模板中的 {{$store.state.count}} 会报错，是因为 $store 没有绑定到 this 上。vue3 中绑定到 this 可以用 app.config.globalProperties[属性名]

    // createApp(App).use(store,name)会调用store的install方法
    install(app,name){
        // app 是vue3暴露的对象
        app.provide(name || storeKey,this)
        app.config.globalProperties.$store = this
    }
}

$store 绑定到 this 后就不会报错了

但此时点击 错误增加 的按钮没有任何效果，

手写 Vuex4 源码_第7张图片

因为此时 store.state 并不是响应式的，需要增加响应式效果，vue3 为复杂数据提供了 reactive

class Store{
    constructor(options){
        // 这里给options.state加了一层，用 data 包裹是为了重新赋值的时候可以直接 this._store.data = 。。。 ，而不用再使用 reactive
        this._store = reactive({data:options.state})
        this.state = this._store.data
    }
    // createApp(App).use(store,name)会调用store的install方法
    install(app,name){
        // app 是vue3暴露的对象
        app.provide(name || storeKey,this)
        app.config.globalProperties.$store = this
    }
}

这时候 错误增加 的按钮就有效果了

手写 Vuex4 源码_第8张图片

实现getters

模板中是使用 getters 是以属性的方式：

// App.vue
数量：{{count}} 
数量：{{$store.state.count}}


double:{{double}}
double:{{$store.getters.double}}

在 store.js 中定义的getters 是由一个大对象里面包含多个函数组成

getters: {
    double(state){
      return state.count * 2
    }
},

在 store 中 double 是函数，返回的 state.count * 2的结果。 在模板中使用的是 $store.getters.double ，这个 double 是 getters 上的一个属性。所以这里需要进行转换

const forEachValue = function(obj,fn){
    return Object.keys(obj).forEach((key) =>{
        fn(obj[key],key)
    })
}

class Store{
    constructor(options){
        this._store = reactive({data:options.state})
        this.state = this._store.data
        this.getters = Object.create(null)
        forEachValue(options.getters,(fn,key) => {
            // 当模板解析 $store.getters.double 时，
            // 就去执行 options.getters里面对应属性的函数,并将函数结果赋予该属性
            Object.defineProperty(this.getters,key,{
                // vue3.2之前的vuex中不能使用计算属性 computed，导致每次访问的时候都会执行函数引发潜在性能问题
                // vue3.2修复了这个bug
                get:() => {
                    return fn(this.state)
                }
            })
        })
    }
    // createApp(App).use(store,name)会调用store的install方法
    install(app,name){
        // app 是vue3暴露的对象
        app.provide(name || storeKey,this)
        app.config.globalProperties.$store = this
    }
}

forEachValue 函数接收一个对象参数 obj 和一个处理函数参数 fn；里面会遍历对象，循环调用 fn；

这里遍历 options.getters ，响应式注册到 this.getters 上，这样当模板解析 $store.getters.double 时，就会执行对应的 fn

点击错误增加按钮，改变 $store.state.count 的值进而导致 getters 值的变化

手写 Vuex4 源码_第9张图片

实现 commit 和 dispatch

commit 和 dispatch 在组件中是这样使用的：

store.js 中定义的是这样的：

mutations: {
    mutationsAdd(state,preload){
      state.count += preload
    }
},
actions:{
    // 异步调用
    actionAdd({commit},preload){
      setTimeout(() => {
        commit('mutationsAdd',preload)
      }, 1000);
    }
}

调用 mutation ： store.commit(mutation类型，参数)

调用 action ： store.dispatch(action类型，参数)

在 Store 类中实现 commit：

class Store{
    constructor(options){
        // 将 store.js 中定义的 mutations 传进来
        this._mutations = options.mutations
        this.commit = function(name,preload){
            if(this._mutations[name]!==undefined){
                // 根据传进来的类型，调用对应的方法
                this._mutations[name](this.state,preload)
            }
        }
    }
}

效果如下，数量每次增加 1

手写 Vuex4 源码_第10张图片

在 Store 类中实现 dispatch：

class Store{
    constructor(options){
        // 将 store.js 中定义的 actions 传进来
        this._actions = options.actions
        this.dispatch = function(name,preload){
            if(this._actions[name]!==undefined){
                // 根据传进来的类型，调用对应的方法
                let fn = this
                // dispatch 进来调用的是 actionAdd({commit},preload)
                this._actions[name].apply(fn,[fn].concat(preload))
            }
        }
    }
}

dispatch 调用的参数是({commit},preload)，所以这里传进去需要是 (this,preload)

看看效果：

这里报了错，由 dispatch 触发 actions 正常，但 actions 触发 对应的 mutations 出错了，显示 this 是 undefined。那么这里就要修改下之前的 commit 实现了，先用一个变量将 Store 类实例的 this 保存起来

class Store{
    constructor(options){
        // 这里创建一个 store 变量保存 this 是方便之后嵌套函数里面访问当前 this
        let store = this

        this._mutations = options.mutations
        this.commit = function(name,preload){
            if(store._mutations[name]!==undefined){
                store._mutations[name](store.state,preload)
            }
        }

        this._actions = options.actions
        this.dispatch = function(name,preload){
            if(store._actions[name]!==undefined){
                store._actions[name].apply(store,[store].concat(preload))
            }
        }
    }
}

这样就可以了

手写 Vuex4 源码_第11张图片

注册模块

平常使用中定义 modules 如下

// store/index.js
import { createStore } from 'vuex'

export default createStore({
  // strict: true,
  state: {
    count: 1
  },
  // ...
  modules: {
    aCount: {
      state: {
        count: 1
      },
      modules: {
        cCount: {
          state: {
            count: 1
          },
        },
      }
    },
    bCount: {
      state: {
        count: 1
      },
    }
  }
})

组件中使用

// App.vue

手写 Vuex4 源码_第12张图片

先实现将用户定义的多个 modules 进行格式化，创造父子关系

用户传进来的数据

手写 Vuex4 源码_第13张图片

格式化后的数据

手写 Vuex4 源码_第14张图片

上面的每个 modules 下的数据格式如下

this._raw = modules // 保存不做处理的源数据
this.state = modules.state // 保存状态
this.children = {} // 创建子对象
  • _raw 保存不做处理的源数据
  • state 保存状态
  • children 保存子模块

比如 bCount

// 格式化前
bCount:{
   state: {
      count: 1
   },
}

// 格式化后
bCount: {
    _raw: bModule, // 这里放的是格式化前的数据
    state: bModule.state,
    children: {}
},

所以这里定义一个类 moduleCollection，专门用来收集模块，将用户写的嵌套 modules 格式化，创造父子关系

class Store {
    constructor(options) {
        const store = this
        
        // 收集模块，将用户写的嵌套modules格式化，创造父子关系
        store._modules = new moduleCollection(options)
        console.log(store._modules)
    }
}

在 moduleCollection类中定义 register 方法处理数据，定义 this.root 保存处理过后的数据

class moduleCollection{
    constructor(rootModule){
        // root 存储格式化的数据，方便后续安装到 store.state 上
        this.root = null
        this.register(rootModule,[])
    }
    register(rootModule,path){
    }
}

register 方法接受两个参数

一个表示当前处理的模块数据 rootModule ，一个表示当前处理的是谁的模块数据 path

path之所以用数组表示，是因为后面建造父子关系时，使用path可以进行关联

比如 path 是空数组，则表示处理的是根模块的数据，是 [a] 则表示处理的是 a 模块，是[a,c] 则表示处理的是 c 模块的数据，并且，c模块的数据要加到 a 模块的 children 中。

对于 register 方法：

首先将用户定义的 store 格式化赋值给 this.root，这里可以抽象出一个类，因为每个模块的格式都是 _raw,state,children

class Module{
    constructor(modules){
        this._raw = modules
        this.state = modules.state
        this.children = {}
    }
    getChild(key){
        return this.children[key]
    }
    addChild(key,module){
        this.children[key] = module
    }
}

class moduleCollection{
    register(rootModule,path){
        const newModule = new Module(rootModule)
        if(path.length===0){
            this.root = newModule
        }
    }
}

然后判断 最外层的 store 中也就是根模块还有没有子模块，如果有，继续递归格式化子模块数据

// 如果根模块下还有子模块，则继续递归注册
if(rootModule.modules){
    Object.keys(rootModule.modules).forEach((key) =>{
        this.register(rootModule.modules[key],path.concat(key))
    })
}

用户定义的 store 中，根模块下定义了子模块，子模块里面分别是 aCount 和 bCount，所以执行到上面代码时， key 就是 aCount，bCount

rootModule.modules[key] 是他们对应的模块数据

当执行到 aCount 模块时，此时的 path 是[a]，代表处理 aCount 的数据，这时我们要在根模块上添加 aCount，如果 path 是 [aCount,cCount]，则需要在 aCount 模块上添加 cCount 模块，所以这里需要定义一个寻找父模块的方法。

使用 path.slice(0,-1) 得到父模块的 key，默认是根模块

const parent = path.slice(0,-1).reduce((modules,current) =>{
    return modules.getChild(current)
},this.root)

参数 modules 代表上一次执行结果，current代表当前元素，初始传入根模块

这里如果 path 是 [a], 传入给 reduce 时是 [] ,那么返回的就是 this.root

path 是[a,c],传入给reduce 时是 [a], 当执行module.getChild(current) 实际上就是 this.root.getChild(a)

找到父模块后，给父模块的 children 添加 modules

parent.addChild(path[path.length-1],newModule)

moduleCollection 类完整代码：

class moduleCollection{
    constructor(rootModule){
        // root 存储格式化的数据，方便后续安装到 store.state 上
        this.root = null
        this.register(rootModule,[])
    }
    register(rootModule,path){
        // 注册模块，每个模块的格式都是
        // _raw: rootModule,
        // state: rootModule.state,
        // children: {}
        // 所以给传进来的模块都格式化一下
        const newModule = new Module(rootModule)
        // 注册根模块
        if(path.length===0){
            this.root = newModule
        }else{
            // 注册子模块，将子模块添加到对应的父模块，通过 path路径可以知道对应的父模块
            const parent = path.slice(0,-1).reduce((modules,current) =>{
                return modules.getChild(current)
            },this.root)
            
            parent.addChild(path[path.length-1],newModule)
        }
        // 如果根模块下还有子模块，则继续递归注册
        if(rootModule.modules){
            Object.keys(rootModule.modules).forEach((key) =>{
                this.register(rootModule.modules[key],path.concat(key))
            })
        }
    }
}

得到格式化数据后，需要将各个模块的 state 安装在 store.state 上，以便之后调用：$store.state.aCount.cCount.count，$store.state安装后的样子应该是：

state:{
    count:1,
    aCount:{
        count:1,
        cCount:{
            count:1
        }
    },
    bCount:{
        count:1
    }
}

创建一个 installModules 函数

function installModules(store,modules,path){}

class Store {
    constructor(options) {
        const store = this
        
        store._modules = new moduleCollection(options)
        console.log(store._modules)
        
        installModules(store,store._modules.root,[])
        console.log(store.state)
    }
}

store 是当前 Store 类的实例对象，模块安装的地方

modules 是要安装的模块

path 对应父子关系

installModules 方法和 register 方法类似

function installModules(store,modules,path){
    if(path.length===0){
        store.state = modules.state
    }else{
        const parent = path.slice(0,-1).reduce((result,current) =>{
            return result[current]
        },store.state)
        
        parent[path[path.length-1]] = modules.state
    }
    if(modules.children){
        Object.keys(modules.children).forEach((key) =>{
            installModules(store,modules.children[key],path.concat(key))
        })
    }
}

这样也就得到了一个完整的 state

手写 Vuex4 源码_第15张图片

在组件中引用也能正确显示了

手写 Vuex4 源码_第16张图片

手写 Vuex4 源码_第17张图片

注册模块上的 getters，mutations，actions 到 store 上

class Store {
    constructor(options) {
        const store = this
        
        // 收集模块，将用户写的嵌套modules格式化，创造父子关系
        store._modules = new moduleCollection(options)
        
        // 定义私有变量存放对应的 getters,actions,mutations
        store._getters = Object.create(null)
        store._mutations = Object.create(null)
        store._actions = Object.create(null)

        installModules(store,store._modules.root,[])
        
    }
}

同样也是在 installModules 方法里面进行存放操作

在格式化模块时，已经将每个模块定义成这样的数据格式：

this._raw = modules
this.state = modules.state
this.children = {}

_raw 存放的就是源数据，没有被格式化的数据。

所以，取得模块上的 getters 就是 modules._raw.getters；

取得模块上的 mutations 就是 modules._raw.mutations；

取得模块上的 actions 就是 modules._raw.actions；

遍历 modules._raw.getters ，安装到 store._getters 上。这里需要注意的是

getters的参数是 state，这个 state 本来是 modules._raw.state，但 _raw.state没有响应式，而后面store.state 是响应式的，需要根据 path 取得store.state里面对应的 state 
function getCurrentState(state,path){
    return path.reduce((result,current) =>{
        return result[current]
    },state)
}

function installModules(store,modules,path){
    ···
    ···
    if(modules._raw.getters){
        forEachValue(modules._raw.getters,(getters,key) =>{
            store._getters[key] = () =>{
                // 这里的参数不能是 modules._raw.state，没有响应式
                // 而后面 store.state 会是响应式的，需要根据 path 取得store.state里面对应的 state
                return getters(getCurrentState(store.state,path))
            }
        })
    }
    ···
    ···
}

注册 mutations

if(modules._raw.mutations){
    forEachValue(modules._raw.mutations,(mutations,key) =>{
        if(!store._mutations[key]){
            store._mutations[key] = []
        }
        store._mutations[key].push((preload) =>{ // store.commit(key,preload)
            mutations.call(store,getCurrentState(store.state,path),preload)
        })
    })
}

在模块里面，可能有多个同名的 mutations，所以这里可能有多个同名 key，需要用数组包装起来

注册 actions

if(modules._raw.actions){
    forEachValue(modules._raw.actions,(actions,key) =>{
        if(!store._actions[key]){
            store._actions[key] = []
        }
        store._actions[key].push((preload) =>{
            // store.dispatch({commit},preload)
            // actions执行后返回的是promise
            let res = actions.call(store,store,preload)
            if(!isPromise(res)){
                return Promise.resolve(res)
            }
            return res
        })
    })
}

和 mutations 一样，也可能会有多个重名的 actions。区别是 actions 执行完后返回的是一个 promise

命名空间

命名空间的用法，添加 namespaced:true

// store.js
aCount: {
  namespaced:true,
  state: {
    count: 1
  },
  mutations: {
    mutationsAdd(state, preload) {
      state.count += preload
    }
  },
  modules: {
    cCount: {
      namespaced:true,
      state: {
        count: 1
      },
      mutations: {
        mutationsAdd(state, preload) {
          state.count += preload
        }
      },
    },
  }
}

页面中就可以使用 $store.commit('aCount/mutationsAdd',1) 调用 aCount 下的 mutationsAdd

$store.commit('aCount/cCount/mutationsAdd',1) 调用 cCount 下的 mutationsAdd

在安装模块的时候，通过检测模块是否定义 namespaced 为 true，来给安装的模块的 actions,mutations 添加命名空间前缀

function getNameSpace(modules,path){
    let root = modules.root
    // 传入的是 根模块
    // 当 path 是[],返回空字符串
    // 2、当 path 是 [aCount] ,根据path，取得根模块下的对应的 aCount , modules.getChild(aCount)
    // 然后判断 aCount 模块下是否定义namespaced，有则返回 aCount/
    // 当 path 是 [aCount,cCount] ,重复2，然后根据步骤2 取得的子模块，再往下找子模块cCount，
    // 然后判断 cCount 模块下是否定义namespaced，有则返回 aCount/cCount/
    // [] => ''  [aCount] => 'aCount/'  [aCount,cCount] => 'aCount/cCount'
    return path.reduce((module,current) =>{
        root = root.children[current]
        return root.namespaced?(module+current+'/'):''  
    },'')
}

function installModules(store,modules,path,root){
    ···
    // 所以这里先根据path取得设置了 namespaced 的模块名字，拼接后注册到 mutations，actions的名字上
    const namespace = getNameSpace(root,path)
    console.log(namespace)

    if(modules._raw.mutations){
        forEachValue(modules._raw.mutations,(mutations,key) =>{
            if(!store._mutations[namespace + key]){
                store._mutations[namespace + key] = []
            }
            store._mutations[namespace + key].push((preload) =>{ // store.commit(key,preload)
                mutations.call(store,getCurrentState(store.state,path),preload)
            })
        })
    }

}

在 getNameSpace 方法中，传入的参数 path 表示的是有父子关系的模块名组成的数组，通过 path 找到对应的模块，判断是否定义 namespaced 为 true。最终返回命名空间字符串

严格模式

要设置严格模式，在根节点上指定 strict:true 即可。

const store = createStore({
  // ...
  strict: true
})

设置了严格模式，没有通过 mutations 改变状态都会弹出一个报错信息（即通过 $store.state.count++ 直接改变状态）

并且官方建议不要在发布环境下启用严格模式

那么这里可以创建一个变量 isCommiting ，用来判断是否通过 mutations 改变状态，只要是执行了 mutations 方法的都去改变 isCommiting。

store.commit = (type,preload) =>{
    this.withCommit(() =>{
        if(store._mutations[type]){
            store._mutations[type].forEach((fn) =>{
                fn(preload)
            })
        }
    })
}
withCommit(fn){
    this.isCommiting = true
    fn()
    this.isCommiting = false
}

上面执行 mutations 之前，isCommiting 为 true，此时只需要知道，当状态变化的时候 isCommiting 不为 true，则提示报错。

这里每个数据状态变化都需要知道 isCommiting 的值，所以需要深度监听整个状态。深度监听会带来一定性能损耗，所以严格模式不建议在生产环境使用。

if(store.strict){
    watch(() =>store._store.data,() =>{
        console.assert(store.isCommiting,'do not mutate vuex store state outside mutation handlers.')
    },{deep:true,flush:'sync'})
}

效果如下：

  数量（根模块）：{{$store.state.count}}

手写 Vuex4 源码_第18张图片

插件模式

Vuex 的插件实际上是一个函数，store 作为这个函数的唯一参数。定义插件即在 createStore 中定义 plugins 选项，选项是数组格式，可包含多个插件函数。这些插件函数会在创建 store 时依次执行

const plugins1 = (store) => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
  })
}

const store = createStore({
  // ...
  strict: true,
  plugins:[plugins1],
})

在插件中可以调用 subscribe 方法，参数是当前调用的 mutation 和调用 mutation 后的 state ，此时的 state 是最新的。并且 subscribe 中的函数都是在每次 mutation 之后调用。

根据这些，来实现 subscribe 方法

class Store {
    constructor(options) {
        const store = this
        // ...
        store._subscribe = []
        store.subscribe = (fn) =>{
            store._subscribe.push(fn)
        }
        const plugins = options.plugins
        plugins.forEach(fn => {
            fn(store)
        });
    }

定义 _subscribe 私有变量数组，用来存储插件中 subscribe 的函数。如果定义了 plugins 选项，那么依次执行选项中的插件函数。

store.commit = (type,preload) =>{
    this.withCommit(() =>{
        if(store._mutations[type]){
            store._mutations[type].forEach((fn) =>{
                fn(preload)
            })
            store._subscribe.forEach(fn => {
                fn({type:type,preload:preload},store.state)
            });
        }
    })
}

在调用完 mutation 后，循环调用 _subscribe 的函数。这样每个函数中的 state 参数都是最新的

现在来实现一个持久化存储的插件，将状态存储在 sessionStorage 中，页面刷新后，从 sessionStorage 中取出并替换为最新状态。

const customPlugin = (store) =>{
  const local = sessionStorage.getItem('vuexState')
  if(local){
    store.replaceState(JSON.parse(local))
  }
  store.subscribe((mutation,state) =>{
    sessionStorage.setItem('vuexState',JSON.stringify(state))
  })
}

在 store.subscribe 参数函数中，每次调用 mutation 后，将状态存储在 sessionStorage 中。store.replaceState 则是一个替换状态的方法。

replaceState(newState){
    this.withCommit(() =>{
        this._store.data = newState
    })
}

效果如下：
手写 Vuex4 源码_第19张图片

总结

Vuex 在项目中用了很久，只知其然不知其所以然，故研究学习并实现出来。

从理解思路到手写出来，然后将实现过程记录下来就有了这篇文章，这个过程断断续续持续了大概一个月，项目和文章基本都是利用下班时间写的，确实挺累的，不过实现出来后往回看，还是学到很多东西，还挺欣慰的；文章有不足的地方还请各位大佬指正；

你可能感兴趣的:(vuexvue.js)

  • Vuex入门 池塘里快乐的小跳蛙
    什么是VuexVue.js官网中是这样描述的：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。总结一下就是：Vuex是Vue中的状态管理工具。为什么要使用VuexVuex使工程的各种状态的可控性得以提高。比如：parent.vue组件里面有两个子组件：borther.vue和sister.vue，
  • vue中mapGetters和...mapGetters dianchanhe0596
    vuex中的...mapGetters(['name'])如何实现的vuexvue.js根据文档介绍https://vuex.vuejs.org/zh-cn/...和看了http://www.imooc.com/article/...exportdefault{computed:{...mapGetters(['singer']),}....}最终会转换成exportdefault{compute
  • Vue 入门2 基础篇 老奶瓶
    [TOC]Vue.js基础部分包括Vue.js的组成（template,script,style）模板语法（文本属性）、渲染条件v-if、列表渲染v-for事件处理v-on(@简写)、计算属性computedVue.js核心组件路由组件vue-router单项数据流状态管理VuexVue.js基础模板语法Vue.js使用了基于HTML的模版语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据
  • Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng） gauseen vue.jsvue-cli3javascript前端
    作者：gauseen0.关于Vuejs简介：Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架，易用、灵活、高效。生态系统项目介绍awesome-vueVue.js相关很棒的工具集vue-routerVue.js官方的路由管理器vuexVue.js应用的状态管理工具vue-cli一键式快速构建Vue.js应用开发环境vue-loaderwebpack的loader，解析.
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他