Vuex的基本概念

1.什么是Vuex

        Vuex是一个专门为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。主要解决大中型复杂项目的数据共享的问题。

2.Vuex运行原理

        在组件中通过 dispatch 来调用 actions 中的方法，在 actions 中通过 commit 来调用 mutations 中的方法，在 mutaions 中的方法可以直接操作 state 中的数据，只要 state 中的数据发生改变，就会立即相应到所有的组件上。

3.Vuex下载

cnpm install vuex --save

4.Vuex的核心

1. state        所有的数据都存储在 state 中， state 是一个对象
2. mutations       可以直接操作 state 中的数据
3. actions       只能调用 mutation 中的方法
4. getters       类似于计算属性，可以实现对 state 中的数据做一些逻辑性的操作
5. modules       将仓库分模块存储
6. plugins       插件

5.Vuex的使用

        state        $store.state.**

<div class="index">
    {{$store.state.username}}
</div>

        mutation        $store.commit("方法名",参数)        只能传一个参数

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        submit(){
            this.$store.commit('sub','one')
        }
    },
}
</script>

         actions        $store.dispatch(“方法名”，参数)

methods: {
//通常这个handle 是一个事件来触发 比如点击去执行它等等
  handle() {
    //这里有触发actions的第一种方式  第二种方式为map映射的方式在下一篇文章有介绍
    this.$store.dispatch('Async','第二个参数')
  }
}

         getters        $store.getters.**

num () {
      return this.$store.getters['sum']
 }

         modules        $store.模块名.state

一般结构

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }
 
const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})

使用

 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  useName: function() {
   //return store.state.login.useName
    return this.$store.state.moduleA.useName
  }

6.Vuex的映射

        映射函数在组件中对应的位置

                mapState        --        computed

computed:{
    ...mapState(['username'])
}

                mapGetters        --        computed

computed:{
    ...mapGetters(['sum'])
}

                mapMutations        --        methods

methods:{
    ...mapMutations(['sub'])
}

                mapActions        --        methods

methods:{
    ...mapActions(['handle'])
}

7.vuex的持久化

因为 vuex 中的 state 存储在内存中，一刷新就没了，例如登录状态，两种解决方案

        第一种：通过H5的本地存储（localStorage , sessionStorage）

        第二种:  通过第三方插件（vuex-persistedstate）

                下载 vuex-persistedstate

cnpm install vuex-persistedstate --save

                在store文件夹中的index.js引入

import persistedstate from 'vuex-persistedstate'

                配置插件

plugins: [
    persistedState({ storage: window.sessionStorage })
]