Vuex概念

Vuex是什么?

 

Vuex是一个专门为vue.js应用设计的 (状态管理架构) , 统一管理和维护各个vue组件的可变化状态 (可以理解成vue组件李某些data).

Vue有五个核心概念,分别是"state,getters,mutations,actions,modules".文本将对这个五个狠心概念进行梳理.

总结:

state是基本数据类型

getters是从基本数据派发的数据

mutations是提交更改数据的方法,同步

actions他像是一个装饰器,包裹mutatuons,是之可以异步

modulse 模块化管理工具Vuex

state:

state即Vuex中的基本数据类型!

单一状态树

Vuex使用单一状态树,即用一个对象就包含了全部的状态数据.state作为构造器选项.定义了所有我们需要的基本状态参数

我们可以通过vue的computed获得Vuex的state,代码如下:

const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

 每当store.state.count变化的时候,都会重新取计算属性,并触发更新关联的DOM.

getters:

即从store的state中派发生出的状态.

getters接收state作为其第一个参数,接受其他getters作为第二个参数,如果不需要,第一个参数可以省略,代码如下

const store = new Vuex.Store({
    state: {
        count:0
    }，
    getters: {
        // 单个参数
        countDouble: function(state){
            return state.count * 2
        },
        // 两个参数
        countDoubleAndDouble: function(state, getters) {
            return getters.countDouble * 2
        }
    }
})

与state一样,我们也可以通过Vue的computed获取Vuex的getters.

const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        },
        countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        }
    },
    //..
})

 mutations

提交mutation是更改Vuex中的store中的状态的唯一方法.(mutation是改变的意思)

mutation必须是同步的,如果要异步需要的actions.

每个mutation都有一个字符串  事件尅性type和一个回调函数(handler).这个回调函数就是我们实际进行状态更改的地方法.并且他会接受state作为第一个参数,提交载荷作为第二个参数..提交荷载也可以省略的

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    //无提交荷载
    increment(state) {
        state.count++
    }
    //提交荷载
    incrementN(state, obj) {
      state.count += obj.n
    }
  }
})

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法

//无提交荷载
store.commit('increment')
//提交荷载
store.commit('incrementN', {
    n: 100
    })

对象风格的提交方式

我们也可以使用这样包含 type 属性的对象的提交方式。

store.commit({
  type: 'incrementN',
  n: 10
})

Mutations 需遵守 Vue 的响应规则

• 最好提前在你的 store 中初始化好所有所需属性。
  • 当需要在对象上添加新属性时，你应该 
    • 使用 Vue.set(obj, 'newProp', 123), 或者
    • 以新对象替换老对象。例如，利用对象展开运算符我们可以这样写state.obj = {...state.obj, newProp: 123 }

actions

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

我们用下面的代码来结束actions:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setInterval(function(){
        context.commit('increment')
      }, 1000)
    }
  }
})

Modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
 
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
 
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态,对于模块内部的 getter，根节点状态会作为第三个参数:

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // state 模块的局部状态
      state.count++
    }
  },
 
  getters: {
    doubleCount (state) {
      return state.count * 2
    },
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}


const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum (context) {
      if ((context.state.count + context.rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

map的高级用法

map:接收两个参数,一个是回调函数,另一个号回调函数的this值(可选),回调函数接收三个参数,分别是(当前值,当前索引,整个数组).

返回:函数返回一个新创建的数组,数组中每个元素都经过了回调函数的处理,结果不改变原数组

代码:

let nums = [1, 2, 3];
let obj = {val: 5};
let newNums = nums.map(function(item,index,array) {
  return item + index + array[index] + this.val; 
  //对第一个元素，1 + 0 + 1 + 5 = 7
  //对第二个元素，2 + 1 + 2 + 5 = 10
  //对第三个元素，3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]
 

 Vuex的持久化:

vuex存储了应用的很多数据,但是一但我们刷新页面,所有的数据都会丢失掉,只能重新从服务器啦数据,又要加很多的逻辑判断,我们可以把vuex和storage结合起来,来解决这个问题.

首先我们下载下面这个指令:

npm install vuex-persistedstate -S

在使用:

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
  // ...
    plugins: [createPersistedState()]  //加上这个就可以了
})

这时候我们右击点检查,看Application里面

需要注意的是,退出登录后或者切换账号就要清除vuex里面的数据,敏感信息不要放在vuex里面,或者加密之后在存进去就ok了