2021-01-11

vuex的理解和使用

vuex在很多时候我们都需要使用，vuex的好处有很多变量干净使用方便可以关联多个页面
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vuex的使用方式比较简单接下来就一起来看看

安装创建

1. 安装vuex
> npm install vuex --save
>
2. 使用
> import Vue from 'vue'
> import Vuex from 'vuex'
> Vue.use(Vuex)
3. 介绍
   State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
   Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
   Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
   Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
   Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

vuex里含有的State，Getters，Mutations，Action，Modules

State–库

const store = new Vuex.Store({
    //state是vuex存储位置可以理解为一个数据库
    state:{
        name:'卧槽',
    }
 });

页面中this.$store.state.name

Getters–运算

Getters相当于一个computed运算方法可以给state里的数据进行一波处理

const store = new Vuex.Store({
    //state是vuex存储位置可以理解为一个数据库
    state:{
        name:'卧槽',
    },
    getters:{
        newCount:state => state.name + '牛逼啊'
    }
});

可以这样取到值 this.$store.getters.newCount;
在页面里也可以import {mapGetters} from 'vuex'

然后这样调起使用

computed: {
  ...mapGetters([
    'pageHeight',
    'stretchNavState',
    'haveLabel'
  ]),
},

Mutations–正删改查

const store = new Vuex.Store({
    //state是vuex存储位置可以理解为一个数据库
    state:{
        name:'卧槽',
    },
    getters:{
        newCount:state => state.name + '牛逼啊'
    },
    mutations:{
        changeInfo(state,value){
            state.age=18  
            // 给存储库里增加个age等于18这样一般不太好最好在state里先定义下
        }
    }
});

使用的方法this.$store.commit("changeInfo", value);一般放在函数里触发

Action–操作

一般Action用于操作和函数处理和操作比如登录
在登录的时候this.$store.dispatch('goIn',{name:'卧槽',pass:'123456',code:'888'})
触发这个Action的函数

const store = new Vuex.Store({
    //state是vuex存储位置可以理解为一个数据库
    state:{
        name:'卧槽',
    },
    getters:{
        newCount:state => state.name + '牛逼啊'
    },
    mutations:{
        changeInfo(state,value){
            state.name=value.name  
            // 给存储库里增加个age等于18这样一般不太好最好在state里先定义下
        }
    },
    action:{
        goIn(context,data){
            //请求登录接口
            login(data).then(res=>{
                context.commit('changeInfo', {name:res.name})
            })
        }
    }
});

只有通过action=>mutations=>states,这个流程进行操作

Modules–模块化

项目中有很多地方需要存入vuex里如果在单个vuex里会越写越乱越写越多不太好

import login from './modules/login' // 模块B

const store = new Vuex.Store({
    //state是vuex存储位置可以理解为一个数据库
    state:{},
    getters:{},
    mutations:{},
    action:{},
    modules:{
        login
    }
});

这样就可以引入login里的东西了

批量添加modules里的文件进入主体里

// 获取文件下所有js的内容
const modulesFiles = require.context('./modules', true, /\.js$/)
// 把modules文件夹下的所有导入这里
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})