md/vue/vuex_使用.md

vuex 技巧使用

1. 基础介绍

官方文档写的非常好,建议自己看去

• 官方合作项目 vuex官方文档
• 状态管理模式

在一个专门的地方来存储数据,类似于仓库的存在,也可以视作一个快递中转站.统一管理数据,好知道一些数据到了什么地方,你的包裹到了什么地方

2. 老子懂了

3. 实战演练

自己在项目中如何使用vuex 项目参照antdv的antdpro项目

• ### 项目结构
  目前的路径

> 带后缀的是文件,没带后缀就是文件夹
- `src`
  -  `store`
     -  <font color=#008000>index.js</font>
     -  `modules`
        -  state.js

• 文件之间的如何导入

  • 在main.js中导入store,如下面的代码所示

    import Vue from 'vue'
    import store from './store/'
    // elseImport...
    
    // someUse...
    new Vue(
        store,
        // elseMounet
    ).$mount('#app');
    

  • 在store目录下的index.js中配置导入vue和vuex,顺便导入modules中自己创建的vuex模块,如下面代码所示

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import stateStore from './modules/state'
    // 继续导入其他模块
    
    //在vue中启用Vuex，重要
    Vue.use(Vuex);
    
    export default new Vuex.store({
        modules: {
            stateStore,
            // 其他的vuex模块
        },
        state: {
    
        },
        mutations: {
    
        },
        actions: {
    
        },
        getters: {
    
        }
    })
    

### 随缘记录的vue小技巧

1. vue中的ref可以进行重名,重名后不会报错,只需要使用下标进行访问
    1. 正常情况
    > 直接使用 this.$refs.name 即可访问 
    2. 重名情况下 
    > this.$refs.names[0] 可以访问
2. vue组件中元素不更新
   1. 如何强制更新数据(update)
      1. this.$forceUpdate();
      > 该方法不管数据有没有进行更新都会进行强制进行更新 
3. vue插槽创建方法(slot)
   1. 2.6.0版本
      1. 创建
        语法` v-slot:slotName = "customPropsName"`,解释,在使用组件的时候在template中定义此行代码即可 

4. 先留着这个板块

6. 我悟了