vuex知识笔记，及与localStorage和sessionStorage的区别

时间 2020-02-24

标签 vuex 知识笔记 localstorage sessionstorage 区别栏目网站开发繁體版

原文原文链接

菜单快捷导航

一、Vuex概念和应用场景

　　首先，Vuex是什么，官网介绍说Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。个人理解就是Vuex就是相似于sessionStorage这样管理数据(本地存和取)的一种技术方案。vue

　　既然vuex相似于sessionStorage，那为什么咱们还要学习vuex，直接用sessionStorage和localStorage不就行了？这个问得好，我来描述一种场景：多个视图(view)组件都要用到某一条数据(状态)，当这条数据发生变化的时候，依赖于该数据(状态)的相关视图(view)都要跟着即时更新。这种场景在工做中很是常见，我说一个本身碰到的例子，之前有一个react项目，其中有个功能是在pc页面自定义小程序页面，而后整个PC页面有三个组件组成，在三个组件中还有其余的不少子组件。而后一开始的作法就是经过事件和组件间传值来进行整个页面数据同步更新，后面随着组件愈来愈多，功能愈来愈复杂，麻烦和问题也就愈来愈多。而后每个后面来接手的同事看代码都要看好一阵，长痛不如短痛...react

　　对的，在工做中这种常见的多个组件依赖于同一条数据(状态)，须要即时响应更新的状况，vuex的价值就体现出来了。这种状况下，vuex相比其余实现手段，就要简单干脆方便多了！先看一个小例子，看看vuex和localStorage、sessionStorage的区别，上图：git

　　如图，vuexPageA页面中引用了三个组件，每一个组件都分别从localStorage、sessionStorage、vuex中取了一个值。点击按钮加1的时候，vuex的值是及时更新了，其余须要刷新才能更新。总结一下：github

localStorage存储的值可以永久的存储在浏览器上。不论是从新打开新窗口仍是重启，同一个浏览器上的相同域名下，localStorage的值一直在。
sessionStorage存储的值依赖于当前窗口(当前会话), 只要当前窗口不关闭，它存储的数据就一直在。一旦关闭窗口或者打开新窗口，sessionStorage以前存储的数据就会消失。
相比localStorage和sessionStorage，vuex存储的数据能够即时更新到，当前项目下的全部引用了该数据的组件。可是若是刷新页面的话，vuex存储的值会重置，而localStorage和sessionStorage存储的值不会重置。

二、Vuex知识点State、Getter、Mutaion、Action

2.1 Vuex之State和mapState

　　每个Vuex应用的核心就是store(仓库)，“store"基本上就是一个容器。Vuex使用单一状态树，至关于用一个对象(store)就包含了所有的应用层级状态，也就是说每一个应用也只包含一个store实例。所以Vuex的使用从new一个Vuex.Store实例(store实例)开始。store实例中的State属性就是用来存放Vue应用的全部的状态。先来看要给最简单的包含State属性的store实例：小程序

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

export default new Vuex.Store({
    state: {
        count: 0,
    },
})

后面的mutations、getters、actions再慢慢往里面加入代码。api

　　store实例建立，如何应用？Vue实例建立时，提供了一个store选项，可让Vuex经过store选项，将store实例对象从根组件”注入“到每个子组件中：浏览器

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'

//vuex 之 store实例对象
import store from './api/store/index' 

new Vue({
  router,  
  store, // 把 store 对象提供给 “store” 选项，这能够把 store 的实例注入全部的子组件
  render: h => h(App)
}).$mount('#app')

　　store实例注入根组件后，应用中的每一个组件中经过this.$store指的就是该store实例对象。那么如今如何在Vue组件中展现store中的state状态(数据)呢？因为Vuex的状态存储是即时响应的，从store实例中读取状态最简单的方法就是在Vue组件中”计算属性“computed中返回某个状态。每当store.state中某个状态变化的时候，都会从新求取计算属性，而且触发更新相关联的DOM。缓存

　　mapState是一个辅助函数，当咱们应用中一个组件须要获取store中多个状态的时候，使用mapState辅助函数能够帮助咱们更加方便生成计算属性。看看下面的应用测试代码：session

import { mapState } from 'vuex';

    export default {
        data(){
            return {
                localCount: 88
            }
        },
        mounted(){
            console.log("...store对象：", this.$store);
        },
        computed:{
            localStorage_count(){
                return localStorage.getItem('localStorage_count')
            },
            //使用对象展开符"..."，能够将对象目标对象混入到外部对象中
            ...mapState({
                sessionStorage_count(){
                    return sessionStorage.getItem('sessionStorage_count')
                },
                vuex_count: state => state.count, //箭头函数可使代码更简练
                vuex_count_alias: 'count', //传字符串参数'count'等同于 state => state.count
                // 为了可以使用 `this` 获取局部状态，必须使用常规函数
                countPlusLocalState (state) {
                    return state.count + this.localCount
                }
            }),
        },
    }

View Code

2.2 Vuex之Getter和mapGetters

　　有时咱们须要从store中的state种派生出一些状态，好比对store中的某一个状态(数据)进行筛选过滤，而后特别是当有多个组件须要用到这种状态(数据)时，“getter"就出场了！Vuex容许咱们在store中定义”getter"（能够认为是store对象的计算属性）。就像计算属性同样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算。Getter接受state做为其第一个参数：

export default new Vuex.Store({
    state: {
        count: 0,
        todos: [
            { id: 1, text: '金戈铁马，气吞万里如虎', done: true },
            { id: 2, text: '老骥伏枥，志在千里', done: false },
            { id: 3, text: '周公吐哺，天下归心', done: true },
            { id: 4, text: '但使龙城飞将在，不教胡马度阴山', done: false },
        ]
    },
    //Vuex容许咱们再store中定义"getter"（能够认为是store的计算属性）。
    // 就像计算属性同样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算。
    getters: {
        doneTodos: state => {
            console.log('...state.getters.donwTodos...')
            return state.todos.filter(todo => todo.done)
        },
        //Getter也能够接受其余getter做为第二个参数
        //getter在经过属性访问时是做为Vue的响应式系统的一部分缓存其中的
        doneTodosCount: (state, getters) => {
            console.log('...state.getters.doneTodosLength...', getters.doneTodos)
            return getters.doneTodos.length;
        },
        //经过方法访问：经过让getter返回一个函数，来实现给getter传参。
        //getter在经过方法访问时，每次都会去进行调用，而不会缓存结果。
        getTodoById: (state) => (id) => {
            console.log('...state.getters.getTodoById...: ', id);
            return state.todos.find(todo => todo.id === id);
        }
    },
    
})

View Code

　　Getter应用：Getter会暴露为 store.getters 对象，而后在组件中，咱们能够经过this.$store.getters来获得getter。getter里面的属性，能够返回属性，也能够返回方法。若是getter经过属性访问时是做为Vue的响应式系统的一部分缓存，首次调用后再次调用时就会调用缓存，只有该属性的依赖值变化时，再次调用该属性才会从新调用从新缓存。若是getter经过方法访问时，每次都会去进行调用，而不会缓存结果。组件中应用测试代码：

methods:{
            //state.getters调用
            stateGettersProperty(){ //getters属性调用, 属性调用会被缓存
                console.log(this.$store.getters.doneTodos);
                console.log(this.$store.getters.doneTodosCount);
            },
            stateGettersMethod(){ //方法调用,每次都会去进行调用，而不会缓存结果。
                console.log(this.$store.getters.getTodoById(2).text);
                console.log(this.$store.getters.getTodoById(3).text);
            },
            addTodo(){ //增长数据
                let count = this.$store.state.todos.length;
                let obj = {
                    id: count + 1,
                    text: (count+1) + '***' + (count+1),
                    done: count % 2
                }
                this.$store.commit('addTodos', obj);
            },

        }

View Code

　　mapGetters也是一个辅助函数，能够将store对象中的getter映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

View Code

　　若是你想将一个 getter 属性另取一个名字，使用对象形式：

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

View Code

2.3 Vuex之Mutation和mapMutations

　　上面说的mapState、getters、mapGetters都是对store对象中的状态(state)进行应用，若是想更改Vuex的store对象中的状态(state)，必需要用mutation。Vuex中的mutation很是相似于事件：每一个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)　。这个回调函数就是咱们实际进行状态更改的地方，而且它会接受state做为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变动状态
      state.count++
    }
  }
})

View Code

　　mutation里面handler调用经过store.commit来调用，调用方式有“载荷（payload)"和“对象风格”两种方式：

载荷提交方式：

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

对象风格提交方式：
```
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
```
```
store.commit({
  type: 'increment',
  amount: 10
})
```
一条重要的原则：mutation必须是同步函数。在组件中使用this.$store.commit('***')提交mutation，或者使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

2.4 Vuex之Action和mapActions

　　Action相似于mutation，可是Action提交的是mutation，不能直接变动状态；另外Action能够包含任意异步操做。在组件中使用this.$store.dispatch('***')调用action，或者使用mapActions辅助函数将组件中的methods映射为store.dispatch调用。

State、Getter、Mutation、Action的一些应用测试代码见：https://github.com/xiaotanit/tan_vue/blob/master/src/views/vuex/VuexPageB.vue

三、Vuex之模块化(Module)

　　因为使用单一状态树，应用的全部状态(数据)会集中到一个比较大的对象。当应用变得很是复杂时，store对象就有可能变得至关臃肿。为了解决这种问题，Vuex容许咱们将store分隔成模块(module)。每一个模块都有本身的state、mutation、action、getter、甚至是嵌套子模块。

　　默认状况下，模块内容的action、mutation和getter是注册在全局命名空间的，这样使得多个模块可以对同一mutation或action做出响应。所以为了让模块具备更高的封装度和复用性，咱们能够在每一个子模块中添加namespaced: true属性，这样表示该模块成为了带命名空间的模块。这样后面再调用该模块的getter、action和mutation时须要带上该模块名称+调用的属性或方法。下面写一个示例代码：

　　新建三个js文件moduleA.js、moduleB.js、moduleStore.js，其中moduleA和moduleB分别为子模块。

moduleA.js:

const state = {
    countA: 99
}

const mutations = {
    increment(state){
        state.countA++
    },
    decrement(state){
        state.countA--
    }
}

const getters = {
    doubleCount(state){
        return state.countA * 2
    }
}

const actions = {
    add({ commit }){
        setTimeout(function(){
            commit('increment')
        }, 50)
    },
    minus({ commit }){
        setTimeout(()=>{
            commit('decrement')
        }, 500)
    }
}

export default {
    namespaced: true, //表示设置命名空间
    state,
    mutations,
    getters,
    actions
}

View Code

moduleB.js:

const state = {
    countB: 11
}

const mutations = {
    increment(state){
        state.countB++;
    },
    decrement(state){
        state.countB--;
    }
}

//getters相似state里面属性的计算属性
const getters = {
    doubleCount(state){
        return state.countB * 2;
    }
}

const actions = {
    add({ commit }){
        commit('increment')
    },
    minus({ commit }){
        commit('decrement')
    }
}

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

View Code

moduleStore.js:

/*
*  当项目大了后，为了责任清晰，目标明确，更易管理，将store拆成多个module形式
* */
import moduleCountA from './moduleA'
import moduleCountB from './moduleB'
import vuex from 'vuex'
import vue from 'vue'
vue.use(vuex)

export default new vuex.Store({
    modules: {
        moduleCountA,
        moduleCountB
    }
})

　　再新建一个VuexPageC.vue页面，测试调用，js代码以下：

import { mapGetters, mapActions, mapMutations } from 'vuex'

    export default {
        computed:{
            ...mapGetters({
                doubleCountA: 'moduleCountA/doubleCount',
                doubleConunB: 'moduleCountB/doubleCount'
            })
        },
        methods: {
            ...mapActions({
                //moduleA模块的actions
                addCountA: 'moduleCountA/add',
                minusCountA: 'moduleCountA/minus',
                //moduleB模块的actions
                addCountB: 'moduleCountB/add',
                minusCountB: 'moduleCountB/minus'
            }),
            ...mapMutations({
                //moduleA模块的mutions
                incrementA: 'moduleCountA/increment',
                decrementA: 'moduleCountA/decrement',
                //moduleB模块的mutions
                incrementB: 'moduleCountB/increment',
                decrementB: 'moduleCountB/decrement'
            }),
        }
    }

页面效果如图：

完整VuexPageC.vue页面代码见：https://github.com/xiaotanit/tan_vue/blob/master/src/views/vuex/VuexPageC.vue