正文 

当前位置： 首页 > 代码 > java教程

vue从入门到放弃(代码片段)

胡庚申 胡庚申     2022-11-12     203

关键词：

今日学习内容：

1.vuex的介绍

2.vuex的结构和组成

3.vuex的安装命令

4.vuex的state、getters、mutations、actions的使用

5.modules模块化和命名空间的使用

vuex的介绍

  • **VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你能够理解成 vue 组件里的某些 data )。**大白话：集中管理数据的模块
  • 它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  • Vuex有五个核心概念，state, getters, mutations, actions, modules。
  • 状态管理: 简单理解就是统一管理和维护各个vue组件的可变化状态(你能够理解成vue组件里的某些data)

vuex的结构和组成



vuex安装命令

(base) goldwater@hujinshui vue3.0-demo % cnpm i -S vuex

vuex的state、getters、mutations、actions的使用

vuexTestDemo.vue
<template>
  <div>

      <h1>modules 开启命名空间state的使用</h1>
      <p>namespaced为true后，获取modules中的state方式二</p>
      <p>this.$store.state.goods.goods</p>

      <p>namespaced为true后，获取modules中的state方式三</p>
      <p>getGoods</p>

      <p>namespaced为true后，获取modules中的state方式四</p>
      <p>goods</p>

      <h1>modules 开启命名空间getters的使用</h1>
      <p>namespaced为true后，获取modules中的getters方式一</p>
      <p>this.$store.getters['goods/getGoods']</p>

      <p>namespaced为true后，获取modules中的getters方式二</p>
      <p>getGoods</p>

      <h1>modules 开启命名空间mutations的使用</h1>
      <p>namespaced为true后，获取modules中的mutations方式一</p>
      <p>this.$store.getters['goods/getGoods']</p>
      <button @click="addGoodsMutationsFun2">添加商品</button>

      <p>namespaced为true后，获取modules中的mutations方式二</p>
      <p>this.$store.getters['goods/getGoods']</p>
      <button @click="addGoodsMutationsFun('足球')">添加商品</button>

      <h1>modules 开启命名空间actions的使用</h1>
      <p>namespaced为true后，获取modules中的actions方式一</p>
      <p>this.$store.getters['goods/getGoods']</p>
      <button @click="addGoodsActionsFun2">添加商品</button>

      <p>namespaced为true后，获取modules中的actions方式二</p>
      <p>this.$store.getters['goods/getGoods']</p>
      <button @click="addGoodsActions">添加商品</button>

  </div>
</template>
<script>
import mapState from 'vuex'
import mapGetters from 'vuex'
import mapMutations from 'vuex'
import mapActions from 'vuex'
export default 
  computed:
    getGoods()
      return this.$store.state.goods.goods
    ,
    // 第一个参数：命名空间名字；第二个参数：state的数据
    ...mapState('goods',['goods']),
    ...mapGetters('goods',['getGoods'])
  ,
  methods: 
    // ...mapMutations(['addGoodsMutationsFun'])
    addGoodsMutationsFun2()
      this.$store.commit('goods/addGoodsMutationsFun','电视')
    ,
    ...mapMutations('goods',['addGoodsMutationsFun']),
    addGoodsActionsFun2()
      this.$store.dispatch('goods/addGoodsActions','椅子')
    ,
    ...mapActions('goods',['addGoodsActions'])
  

</script>
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import goods from './modules/goods.js'

Vue.use(Vuex)
// 1.安装cnpm i -S Vuex
// 2.创建store文件夹，里面创建index.js
// 3.main.js 引入


const store = new Vuex.Store(
  state: // 相当于data，存放数据
    job:'前端工程师',
    num:0
  ,
  getters: //相当于computed，获取数据
    getJob(state)
      return state.job
    ,
    getNum(state)
      return state.num
    
  ,
  mutations:// 同步修改state数据
    increateMutation(state,num)
      state.num += num
    ,
    reduceMutations(state,num)
      state.num -= num
    
  ,
  actions: // 异步修改mutations
    reduceAction(commit,num)
        commit('reduceMutations',num)
    
  ,
  modules://模块化或命名空间
    goods
  
)
export default store
store/modules/goods.js
const state = 
  goods:['电脑','键盘','手机']


const getters = 
  getGoods(state)
      return state.goods
  


const mutations = 
  addGoodsMutationsFun(state,val)
    state.goods.push(val)
  


const actions =
  addGoodsActions(commit,val)
    commit('addGoodsMutationsFun',val)
  


export default
  state,
  getters,
  mutations,
  actions,
App.vue
<template>
  <div id="app">
    <vuexTestDemo/>
  </div>
</template>

<script>
import vuexTestDemo from './components/vuexDemo/vuexTestDemo.vue'
export default 
  name: 'App',
  components: 
    vuexTestDemo
  

</script>

结果：

modules模块化和命名空间的使用

modulesDemo.vue
<template>
  <div>

      <h1>modules 开启命名空间state的使用</h1>
      <p>namespaced为true后，获取modules中的state方式一</p>
      <p>this.$store.state.goods.goods</p>

      <p>namespaced为true后，获取modules中的state方式二</p>
      <p>getGoods</p>

      <p>namespaced为true后，获取modules中的state方式三</p>
      <p>goods</p>

      <h1>modules 开启命名空间getters的使用</h1>
      <p>namespaced为true后，获取modules中的getters方式一</p>
      <p>this.$store.getters['goods/getGoods']</p>

      <p>namespaced为true后，获取modules中的getters方式二</p>
      <p>getGoods</p>

      <h1>modules 开启命名空间mutations的使用</h1>
      <p>namespaced为true后，获取modules中的mutations方式一</p>
      <p>this.$store.getters['goods/getGoods']</p>
      <button @click="addGoodsMutationsFun2">添加商品</button>

      <p>namespaced为true后，获取modules中的mutations方式二</p>
      <p>this.$store.getters['goods/getGoods']</p>
      <button @click="addGoodsMutationsFun('足球')">添加商品</button>

      <h1>modules 开启命名空间actions的使用</h1>
      <p>namespaced为true后，获取modules中的actions方式一</p>
      <p>this.$store.getters['goods/getGoods']</p>
      <button @click="addGoodsActionsFun2">添加商品</button>

      <p>namespaced为true后，获取modules中的actions方式二</p>
      <p>this.$store.getters['goods/getGoods']</p>
      <button @click="addGoodsActions">添加商品</button>

  </div>
</template>
<script>
import mapState from 'vuex'
import mapGetters from 'vuex'
import mapMutations from 'vuex'
import mapActions from 'vuex'
export default 
  computed:
    getGoods()
      return this.$store.state.goods.goods
    ,
    // 第一个参数：命名空间名字；第二个参数：state的数据
    ...mapState('goods',['goods']),
    ...mapGetters('goods',['getGoods'])
  ,
  methods: 
    // ...mapMutations(['addGoodsMutationsFun'])
    addGoodsMutationsFun2()
      this.$store.commit('goods/addGoodsMutationsFun','电视')
    ,
    ...mapMutations('goods',['addGoodsMutationsFun']),
    addGoodsActionsFun2()
      this.$store.dispatch('goods/addGoodsActions','椅子')
    ,
    ...mapActions('goods',['addGoodsActions'])
  

</script>
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import goods from './modules/goods.js'

Vue.use(Vuex)
// 1.安装cnpm i -S Vuex
// 2.创建store文件夹，里面创建index.js
// 3.main.js 引入


const store = new Vuex.Store(
  state: // 相当于data，存放数据
    job:'前端工程师',
    num:0
  ,
  getters: //相当于computed，获取数据
    getJob(state)
      return state.job
    ,
    getNum(state)
      return state.num
    
  ,
  mutations:// 同步修改state数据
    increateMutation(state,num)
      state.num += num
    ,
    reduceMutations(state,num)
      state.num -= num
    
  ,
  actions: // 异步修改mutations
    reduceAction(commit,num)
        commit('reduceMutations',num)
    
  ,
  modules://模块化或命名空间
    goods
  
)
export default store
store/modules/goods.js
const state = 
  goods:['电脑','键盘','手机']


const getters = 
  getGoods(state)
      return state.goods
  


const mutations = 
  addGoodsMutationsFun(state,val)
    state.goods.push(val)
  


const actions =
  addGoodsActions(commit,val)
    commit('addGoodsMutationsFun',val)
  


export default
  state,
  getters,
  mutations,
  actions,
  namespaced:true // 限定空间开启，这个如果不开启，getters,mutations,actions,都是全局的
App.vue
<template>
  <div id="app">
    <modulesDemo/>
  </div>
</template>

<script>
import modulesDemo from './components/vuexDemo/modulesDemo.vue'
export default 
  name: 'App',
  components: 
    modulesDemo
  

</script>

结果：

vue从入门到放弃(代码片段)

----------------------------------------------------点击这里《专栏目录》查看更多--------------------------------------------------------------------------------------------------------点击这里《专栏目录》查看更多---------------- 查看详情

vue从入门到放弃(代码片段)

vue2.0创建项目命令：(base)goldwater@hujinshuivue%cnpminstall-gvue-cli(base)goldwater@hujinshuivue%vueinitwebpackvue2.0-demo?Projectnamevue2.0-demo#项目名称?ProjectdescriptionAVue.jsproject#项目描述?Au 查看详情

vue从入门到放弃(代码片段)

vue——filter过滤器filterDemo.vue<template><div><h1>过滤器</h1>message|lower</div></template><script>exportdefaultdata()returnmessage:'HelloWorld',fi 查看详情

vue从入门到放弃(代码片段)

vue——filter过滤器filterDemo.vue<template><div><h1>过滤器</h1>message|lower</div></template><script>exportdefaultdata()returnmessage:'HelloWorld',filters:low 查看详情

vue从入门到放弃(代码片段)

插值表达式templateDemo.vue<template><div>HelloWorld!!!<h1>插值表达式</h1>msgnamesex=='1'?'男':'女'<h1>指令</h1><!--尽量少用，会解析内 查看详情

vue从入门到放弃(代码片段)

vue——v-forforDemo.vue<template><div><p>遍历数组</p><ul><liv-for="(item,index)inlistArr":key="item.id">index-item.id-item.title</l 查看详情

vue从入门到放弃(代码片段)

插值表达式templateDemo.vue<template><div>HelloWorld!!!<h1>插值表达式</h1>msgnamesex=='1'?'男':'女'<h1>指令</h1><!--尽量少用，会解析内容，会导致 查看详情

vue从入门到放弃(代码片段)

今日学习内容：1.vuex的介绍2.vuex的结构和组成3.vuex的安装命令4.vuex的state、getters、mutations、actions的使用5.modules模块化和命名空间的使用vuex的介绍**VueX是一个专门为Vue.js应用设计的状态管理架构，统一管理和维护各个vue组... 查看详情

vue从入门到放弃(代码片段)

今日学习内容：1.vuex的介绍2.vuex的结构和组成3.vuex的安装命令4.vuex的state、getters、mutations、actions的使用5.modules模块化和命名空间的使用vuex的介绍**VueX是一个专门为Vue.js应用设计的状态管理架构，统一管理和维护各个vue组... 查看详情

vue-cli从入门到放弃(代码片段)

一:vue是单文件组件导:之前注册组件有什么缺点?1-?缺乏语法高亮2-格式不好整体3-没有专门的写css代码等等参考:vue=>工具=>单文件组件什么是单文件组件?后缀为.vue的文件单文件组件的三个组成部分(代码块:scaffold自动提示)templ... 查看详情

vue从入门到放弃(代码片段)

vue介绍Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整... 查看详情

初识pytorch：从安装到入门，从入门到放弃(代码片段)

目录PyTorch安装配置安装验证PyTorchPyTorch是Facebook团队于2017年1月发布的一个深度学习框架，虽然晚于TensorFlow，也没有TensorFlow火，但目前已经与TensorFlow奇虎相当。而且PyTorch采用了Python语言的接口，可以说它才是Pytho... 查看详情

深度学习---从入门到放弃pytorch基础(代码片段)

深度学习—从入门到放弃(一)pytorchTensor类似于numpy的array，pandas的dataframe；在pytorch里的数据结构是tensor，即张量tensor简单操作1.Flattenandreshape###Originalz:tensor([[0,1],[2,3],[4,5],[6,7],[8,9],[10,11]])Flatte 查看详情

clickhouse从入门到放弃(代码片段)

最近公司需要使用clickhouse做数据分析，我赶紧从docker上下载一个，学习学习。学习成本不大，会mysql就行。clickhouse下载分区基本使用下载下载clickhouse包dockerpullyandex/clickhouse-clientdockerpullyandex/clickhouse-server启动clickhouse-... 查看详情

clickhouse从入门到放弃(代码片段)

最近公司需要使用clickhouse做数据分析，我赶紧从docker上下载一个，学习学习。学习成本不大，会mysql就行。clickhouse下载分区基本使用下载下载clickhouse包dockerpullyandex/clickhouse-clientdockerpullyandex/clickhouse-server启动clickhouse-... 查看详情

django从入门到放弃(代码片段)

目录基于socket手写web框架基于wsgiref定义自己的web框架数据库取数据，渲染页面三大主流框架分析http协议分析Django下载，创建项目 基于socket手写web框架py文件importsocketdefserver_run():soc=socket.socket()soc.bind((‘127.0.0.1‘,8008))soc.listen... 查看详情

go语言从入门到放弃(代码片段)

HelloWorld我们先看看一个最简单的HelloWorld代码1packagemain23import"fmt"45funcmain()6fmt.Println("Hello,World!")7这段代码可以在控制台输出"Hello,World!"下面让我们来刨析一下此段代码第一行的packagemain 定义了该程序的包名为main,main的功能同其... 查看详情

docker从入门到放弃(代码片段)

...机时候用到的docker，时间长了也忘了，准备好好梳理学习入门一波。《十分感谢大神的文章，本文基于大神的文章学习整理。》一、入门基础??Docker使 查看详情