Vuex基础知识

一、Vuex是什么

1、Vuex 是一个专为Vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态已一种可预测的方式发生变化。
2、每一个Vuex应用的核心就是store（仓库）。主要包括以下几部分：
state：最原始的数据状态；
getters：state的计算属性
mutations：改变state的方法，同步操作；
actions：提交mutations，异步操作；
modules：将stroe 模块化
3、Vuex和单纯全局对象的区别：
(1)Vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生改变，那相应的组件也会相应的得到高效更新。
(2)不能直接改变store中的状态，如若想为之，唯一途径就是显式的提交(commint)mutation。这样使得我们方便跟踪每一个状态的变化。

二、vuex的安装、使用

  // window （npm）
   npm install vuex --save
  // mac  （yarn）
  yarn add vuex
// 使用
  import  Vue from  'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)

三、vuex组成以及之间的联系

image.png

四、Store

1、创建stroe

  const store = new Vuex.Stroe({.....});
  export default store
//在main.js中引入
  import store from './store'
 new Vue ({
    el:'#app',
    router,
    store,
    template: '<App/>',
    components: { App },
  })

2、state （如何在组建中获取vuex状态）

 <template>
    <div v-for="tag in visitedViews"></div>
</template>
<script>
  export default {
    computed:{
       visitedViews(){
        return this.$store.state.tagsView.visitedViews 
      }
    }
  }
</script>

2.2、mapState

  <template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div :class="{hasTagsView:needTagsView}" class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed: {
      ...mapState({
        sidebar: state => state.app.sidebar,
        device: state => state.app.device,
        fixedHeader: state => state.settings.fixedHeader
      }),
    }
  }
</script>

3、getters
getters可以看作是store的计算属性，其参数为state。

getters: {
  doneTodos:state=>{
    return state.todos.filter(todo=>todo.none); 
  } 
}
// 获取getters 中的状态
  1、computed:{
       return this.$store.getters.doneTodos
    }
  2、//使用mapGetters 获取
<template>
    <div class="avatar-wrapper">{{ avatar }}
       <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
       <span class="user-name">{{ name }}</span>
       <i class="el-icon-caret-bottom" />
    </div>
</template>
  import { mapGetters } from 'vuex'
  computed:{
    ...mapGetters([
      'avatar',
      'name'
    ])
  }

4、mutations （更改vuex的stroe中状态唯一方法是提交mutation）

const mutations = {
   delCachedView: (state, view) => {
    const index = state.cachedViews.indexOf(view.name)
    index > -1 && state.cachedViews.splice(index, 1)
  },
  }

4.2、在组件中提交mutaions

// 在组件的methods中提交
  delCachedView(){
      this.$store.commint('delCachedView)
  }
// 使用mapMutaions
import { mapMutaions } from 'vuex';
export default {
   methods: {
       'delCachedView' //映射 this.delCachedView() 为 this.$store.commit('delCachedView')
   }
}

5、actions

 <el-button :loading="loading" type="primary"  @click.native.prevent="handleLogin">登录</el-button>
 handleLogin() {
   this.$store.dispatch('user/login', this.loginForm).then((res) =>{
     this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
    })
}

5.1、在组件中分发action

 //1、在组件的methods中，使用this.$store.dispatch('user/login')
//2、使用mapActions 与mapMutations类似。

6、mudules 将store拆分为一个个小模块。便stroe过大时，方便管理。
每个modules 都拥有 state、getters、mutations、action
modules引入方式可以单独每个文件引入。

// store index.js
import app from './modules/app';
import user from './modules/user';
import permission from './modules/permission';

亦可以通过以下方式引入

const modulesFiles = require.context('./modules', true, /\.js$/)
//require.context接收三个参数：
//1.要搜索的文件夹目录
//2.是否搜索它的子目录
//3.以及一个匹配文件的正则表达式
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
}) 
   export default store

纯属个人见解，Vuex 的更多相关知识点,见官网 https://vuex.vuejs.org/zh/guide/.

Vuex基础知识