001_Vue核心插件_vuex

001_Vue核心插件_vuex(h3)

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
  • \src\main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

  • \src\App.vue
<template>
  <div id="app"><m-parent></m-parent></div>
</template>

<style></style>

<script>
import MParent from './views/Home'
export default {
  data() {
    return {}
  },
  components: {
    MParent
  },
  methods: {}
}
</script>

  • \src\views\Home.vue
<template>
  <div>
    <button @click="add_dl">增加</button>
    <h5>
      vuex <span style="color: red">{{ count_dl }}</span>
      <h5>
        getters <span style="color: red">{{ doubleCount }}</span>
      </h5>
    </h5>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  // computed: {
  //   count_dl() {
  //     return this.$store.state.count
  //   },
  //   doubleCount() {
  //     return this.$store.getters.doubleCount
  //   }
  // },
  //辅助函数
  computed: {
    // ...mapState({
    //   //等同于 count =>state.count
    //   count_dl: 'count'
    // }),
    //模块化后上面取不到值
    ...mapState({
      count_dl: state => state.text.count
    }),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    add_dl() {
      //在组件中使用 this.$store.commit('xxx') 调用 mutations
      this.$store.commit('add')
      //在组件中使用 this.$store.dispatch('xxx') 分发 action
      //this.$store.dispatch('delayAdd')
    }
  }
}
</script>

<style lang="scss" scoped></style>

  • \src\store\index.js
import Vue from 'vue'
import Vuex from 'vuex'
import text from './text'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    text
  }
})

  • \src\store\text.js
export default {
  //option_1 唯一数据源 
  state: {
    count: 0,
  },
  //option_2 store的计算属性 
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  //option_3 更改Vuex的store中的状态的唯一方法
  mutations: {
    add(state) {
      state.count ++
    },
    decrease(state) {
      state.count --
    }
  },
  //option_3 Action提交的是mutation,而不是直接变更状态;可以包含任意异步操作。
  actions: {
    delayAdd(context) {
      setTimeout(() => {
        //调用 context.commit 提交一个 mutation
        context.commit('add')
      }, 1000);
    }
  }
}
  • 浏览器界面

已标记关键词 清除标记
没有积分发我邮箱liurui416@qq.com,我看到发给你。 本视频基于Vue2.5录制, 涵盖Vue开发所需技术: 模板、数据绑定、声明式渲染、计算属性、事件处理、过渡动画、指令、自定义Vue插件、组件化开发、组件间通信、Ajax前后台交互、Vue-Router 等. 对数据代理、模板解析、数据劫持、数据绑定核心部分进行深入的源码分析 。 视频中也涵盖Vue状态管理库Vuex的具体使用和原理结构分析。课程目录: 00·视频_源代码, y: a3 U( m0 s3 p 课程目录: 00_视频_源代码% S: f+ A/ M, K1 o6 r$ \ 01_Vue_介绍.avi 02_Vue_基本使用.avi; @$ o! D/ W* Y* t7 D, J J" o 03_Vue_模板语法.avi7 e& h7 X* S; X. j8 b% ? 04_Vue_计算属性之基本使用.avi$ ?3 F: f0 f2 _4 P7 @ _ 05_Vue_监视.avi% t8 c2 r A5 w3 W3 t 06_Vue_计算属性之set与get.avi% u/ D) i% ^' C 07_Vue_强制绑定class和style.avi 08_Vue_条件渲染.avi7 G. }4 Y+ \1 b: m4 D% M8 q; \ 09_Vue_列表渲染.avi 10_Vue_列表的搜索和排序.avi 11_Vue_事件处理.avi* N* A+ |* f1 w5 @! w" n! y 12_Vue_表单数据的自动收集.avi 13_Vue_生命周期.avi 14_Vue_动画.avi1 g0 o+ S$ H0 ^) R* r9 w( c 15_Vue_过滤器.avi" [! p! K% |( Q" H7 M) y 16_Vue_指令.avi1 o- U. F1 p6 X3 F Y6 l5 x# e! w 17_Vue_插件.avi6 S: `8 f/ B Q 18_Vue_使用vue-cli创建项目.avi! C% a v2 U& H0 M& K 19_Vue_基于脚手架编写项目.avi 20_Vue_打包发布项目.avi R: Y/ D' y* c 21_Vue_eslint编码规范检查.avi 22_Vue_案例_初始化显示.avi6 n; U4 S; C9 r 23_Vue_案例_交互添加.avi 24_Vue_案例_交互删除.avi2 }6 C6 n9 U% R9 D 25_Vue_案例_静态组件.avi 26_Vue_案例_动态初始化显示.avi 27_Vue_案例_交互添加.avi) M8 a/ {: ~# P' [ 28_Vue_案例_交互删除todo.avi 29_Vue_案例_交互footer组件功能.avi 30_Vue_案例_存储数据.avi 31_Vue_案例_自定义事件.avi 32_Vue_案例_消息订阅与发布.avi4 \, Z+ l" R/ v1 o$ o% h 33_Vue_案例_slot.avi' V$ v6 k8 X. `# n9 z0 y* a$ f 34_Vue_案例_数据存储优化.avi @1 W* t. b3 k* j* i/ M% w 35_Vue_Ajax请求.avi4 b9 ~( H8 j4 D# Q$ E 36_Vue_案例_初始化显示.avi 37_Vue_案例_搜索.avi 38_Vue_UI组件库_mint-ui.avi 39_Vue_路由介绍.avi 40_Vue_基本路由.avi* H( B9 m# Y" N1 I 41_Vue_嵌套路由.avi3 p! D8 Z& N4 ] a: w5 | 42_Vue_缓存路由组件.avi 43_Vue_向路由组件传递数据.avi 44_Vue_编程式路由导航.avi 45_Vue_源码分析_说明.avi' ]3 S- X/ L1 V- L7 d4 J" Y 46_Vue_源码分析_准备1.avi 47_Vue_源码分析_准备2.avi 48_Vue_源码分析_准备3.avi" I) \+ M5 h; ?+ k 49_Vue_源码分析_数据代理_效果.avi 50_Vue_源码分析_数据代理_debug.avi: v; s# B8 X4 h, u6 P3 ? k1 e4 B& B$ _ 51_Vue_源码分析_数据代理_分析.avi2 F* @4 P4 s- A. D 52_Vue_源码分析_模板解析_大括号表达式.avi 53_Vue_源码分析_模板解析_大括号表达式2.avi# }. z; P% F) a! S7 m- Z6 X1 a0 L( u 54_Vue_源码分析_模板解析_事件指令.avi 55_Vue_源
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页