Vue进阶-脚手架-vuex

脚手架自定义配置

• 输入创建命令

vue create 项目名

• 选择manually select features

路由嵌套

• 创建layout/index.vue

  • 作用：封装路由，设置二级路由挂载点
  • App.vue文件是一级挂载点

• 在router/index.js配置子路由

  • 子路由path不需要写斜杠/

  • 有两种写法（个人开发，团队开发）

    const routes = [
      {
        path: "/",
        component: layout,
        children: [
          {
            path: "",
            name: "index",
            component: () => import("@/views/index"),
          },
          // 个人开发使用
          /* {
            path: "/pins",
            name: "pins",
            component: () => import("@/views/pins"),
          }, */
        ],
      },
      {// 减少代码合并时带来的冲突（团队开发的时候会出现这样的问题）
        path: "/pins",
        component: layout,
        children: [
          {
            path: "", // 这里的空字符表示拼接空字符，path依然等于/pins
            name: "pins",
            component: () => import("@/views/pins"),
          },
        ],
      },
    ];
    

Vuex

• 专为Vue.js应用程序开发的状态管理模式。
• 变量看作“状态”

数据关系

形成闭环

• state（共享状态数据，状态在组件中引用）
• mutations（执行同步代码修改state）
• actions（执行异步操作提交给mutations进行修改）
• 组件（组件调用action）

state

概念

基本使用

// main.js文件
// 实例化vuex
const store = new Vuex.Store({
  // 写配置
  state: {
    a: 123,
    count:0
  },
});

<template>
  <div>
    <p>渲染vuex中count变量{{ $store.state.count }}</p>
  </div>
</template>

优化使用

• 减少代码量，使用计算属性computed

<template>
  <div>
    <p>渲染vuex中count变量: {{ myCount }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    myCount() {
      return this.$store.state.count;
    },
  },
};
</script>

辅助函数-mapState

• 导入mapState

• 采用数组形式引入state属性

• 利用扩展运算符将导出的状态映射给计算属性

  <template>
    <div>
      <p>渲染vuex中count变量: {{ count }}</p>
    </div>
  </template>
  
  <script>
  import { mapState } from "vuex";
  export default {
    created(){
      console.log(mapState(['count']));
    },
    computed: {
      ...mapState(["count"]),
    },
  };
  </script>
  

mutations

概念

执行同步函数

基本使用

<p>渲染vuex中count变量: {{ count }}</p>
    <button @click="$store.commit('addCount', 10)">调用mutations的函数</button>

优化使用

<p>渲染vuex中count变量: {{ count }}</p>
<button @click="$store.commit('addCount', 10)">调用mutations的函数</button>
<button @click="changeCount(5)">优化调用mutations的函数</button>

methods: {
    changeCount(num) {
      this.$store.commit("addCount", num);
    },
  },

辅助函数

• 导入mapMutations

• 采用数组形式引入mutations属性

• 利用扩展运算符将导出的状态映射给methods

  <template>
    <div>
      <p>渲染vuex中count变量: {{ count }}</p>
      <button @click="addCount(8)">辅助函数调用mutations</button>
    </div>
  </template>
  
  <script>
  import { mapState, mapMutations } from "vuex";
  export default {
    computed: {
      ...mapState(["count"]),
    },
    methods: {
      ...mapMutations(["addCount"]),
    },
  };
  </script>
  

actions

概念

• 辅助mutations进行异步操作

基本使用

actions: {
  //声明一个异步函数
    getAsyncCount(store, num) {
      // 一秒后调用函数
      setTimeout(() => {
        store.commit("addCount", num);
      }, 2000);
    },
  },

<template>
  <div>
    <p>渲染vuex中count变量: {{ count }}</p>
    <button @click="$store.dispatch('getAsyncCount', 9)">action基本使用</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["count"]),
  },
};
</script>

优化使用

• 事件处理函数优化使用

<template>
  <div>
    <p>渲染vuex中count变量: {{ count }}</p>
    <button @click="changeCount(100)">事件处理函数action基本使用</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["count"]),
  },
  methods: {
    changeCount(num) {
      this.$store.dispatch("getAsyncCount", num);
    },
  },
};
</script>

辅助函数

• 导入mapActions
• 采用数组形式引入actions属性
• 利用扩展运算符将导出的状态映射给methods

<template>
  <div>
    <p>渲染vuex中count变量: {{ count }}</p>
    <button @click="getAsyncCount(200)">事件处理函数action基本使用</button>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["count"]),
  },
  methods: {
    ...mapActions(["getAsyncCount"]),
  },
};
</script>

getters

概念

声明变量：值是一个函数，函数必须要有返回值，类似于计算属性的用法

基本使用

getters: {
    // state 内置参数
    filterList: (state) => {
      return state.list.filter((item) => item > 5);
    },
  },

<p>渲染vuex中getters变量: {{ $store.getters.filterList }}</p>

优化使用

• 利用计算属性函数返回值，优化

<template>
  <div>
    <p>优化使用-渲染vuex中getters变量: {{ filterList }}</p>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
     filterList(){
      return this.$store.getters.filterList
    }, 
  },
};
</script>

辅助函数

• 导入mapGetters

• 采用数组形式引入getters属性

• 利用扩展运算符将导出的状态映射给computed

  <template>
    <div>
      <p>辅助函数-渲染vuex中getters变量: {{ filterList }}</p>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  export default {
    computed: {
      ...mapGetters(['filterList'])
    },
  };
  </script>
  

module

概念

• 分模块管理全局变量（状态），便于项目维护
• state会因为应用变复杂而臃肿起来，因此有了vuex模块化

基本使用

  getters: {
    // state 内置参数
    filterList: (state) => {
      return state.list.filter((item) => item > 5);
    },
    token: (state) => state.user.token,
    name: (state) => state.setting.name,
  },
  modules: {
    user: {
      state: {
        token: "123123adfafaerwrw3423rwef4r",
      },
      mutations: {},
      actions: {},
      getters: {},
    },
    setting: {
      state: {
        name: "vuex实例",
      },
    },
  },

<template>
  <div>
    <p>渲染user模块的token：{{ $store.state.user.token }}</p>
  </div>
</template>

<script>

</script>

<style>
</style>

优化使用

<template>
  <div>
    <p>渲染setting模块的name：{{ name }}</p>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    // 辅助函数
    ...mapGetters(["token", "name"]),
  },
};
</script>

<style>
</style>

模块上锁

• 给模块化对象上锁，形成高封闭性——namespaced

  user: {
        namespaced: true,
        state: {
          token: "123123adfafaerwrw3423rwef4r",
        },
        mutations: {
          changeToken(state) {
            state.token = 999;
          },
        },
        actions: {
          setAsyncToken(store) {
            setTimeout(() => {
              store.commit("changeToken");
            }, 1000);
          },
        },
        getters: {},
      },
  

• 模块上锁后，内容使用方法

  <template>
    <div>
      <p>渲染user模块的token：{{ $store.state.user.token }}</p>
      <button @click="$store.commit('user/changeToken')">修改token</button>
      <button @click="$store.dispatch('user/setAsyncToken')">
        异步修改token
      </button>
    </div>
  </template>
  

辅助函数使用

<template>
  <div>
    <p>渲染user模块的token：{{ token }}</p>
    <button @click="changeToken">模块化辅助函数修改token</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  computed: {
    // 辅助函数
    ...mapGetters(["token", "name"]),
  },
  methods: {
    ...mapMutations("user", ["changeToken"]),
  },
};
</script>

<style>
</style>