VueX

VueX(Vue状态管理模式)

1、首先应该了解什么是vuex?

vuex是适用于在vue开发项目时使用的状态管理工具。

2、阐述vuex在项目中的使用过程和搭建过程?

  • 首先在src目录下创建一个sotre文件夹,然后在文件夹中创建一个index.js文件

  • 接着就是store仓库的安装了

    安装:cnpm install store --save
    在main.js中引入:import store from './store'
    把store挂载到当前vue实例上
    
  • 下一步就是安装vuex

     安装:cnpm install vuex --save
     初始化store下的index.js内容: import Vue from "vue"
     						      import Vuex from "vuex"
     							  Vue.use(Vuex)
     							  let store =  new Vuex.Store({})
     							  export default store
    

在这里插入图片描述

3、vuex在项目中的应用?(属性)

  • state:是仓库,用来存储状态(变量)。在组件中通过使用 this.$store.state.属性名 来使用
  • mutations:用来写方法,它是可以直接操作state中的数据,可以同步,但是不可以异步。在组件中通过使用 this.$store.commit(“方法名”,参数) 来使用,和组件中的自定义事件类似。当我们需要提交多个参数时,就可以把他们放在一个对象中来提交
  • getters:类似于state的计算属性。在组件中通过使用 this.$store.getters.方法名 来使用
  • actions:在mutation中进行提交,会引起数据失效,所以用actions来进行异步修改状态。由于是异步操作,所以就可以为异步操作封装一个promise对象。在组件中通过使用 $store.dispath(’’) 来使用。
  • models:它是命名空间的处理,为了开发大型项目,可以使用模块化管理模式。每个模块都拥有自己的state、mutation、action、getter。我们在使用的过程中,首先需要在store仓库下新建一个person.js文件,在文件中写state、mutations、actions、getters,然后在store仓库下的index.js文件中的models下挂载person.js文件,这样就可以使用了。
  • plugins:类似于本地仓库
    下载:cnpm install vuex-persistedstate --save
    首先需要在store仓库中引入:import createPersistedState from “vuex-persistedstate”
    然后在 let store下写入:plugins:[createPersistedState()]

4、vuex辅助函数

vuex为我们提供了一些非常方便的辅助函数,比如mapState、mapGetter、mapMutation、mapAction

  • mapState:引入:import { mapState } from 'vuex
    有三种方式:
    • 第一种:对象:如果使用箭头函数,当vuex中的state和当前组件的state,含有相同的变量名称时,this获取的是vuex中的变量,而不是局部变量
      computed: mapState({
      // 箭头函数
      count: state => state.count,
      // 这里为了能够使用this获取局部变量localCount,必须使用常规函数
      countPlusLocalState (state) {
      return state.count + this.localCount
      }
      })
    • 第二种:数组:当映射的计算属性名称与state的子节点名称相同时,我们也可以给mapState传一个字符串数组。
      computed: mapState([
      // 映射 this.count 为 store.state.count
      ‘count’
      ])
    • 第三种:对象展开运算符:mapState函数返回的是一个对象。如果需要将它与局部计算属性混合使用时,通常我们需要一个工具函数将多个对象合并为一个,因此我们可以将最终对象传给computed属性。也可以使用...mapState([]),但前提是映射的计算属性名称与state的子节点名称相同,如果state在vuex的modules中,则不成功。
      computed: {
      localComputed () {},
      …mapState({})
      }
  • mapGetters:将store中的getter映射到局部计算属性
    computed: {
    …mapGetters([
    ‘oneGetter’,
    ‘anotherGetter’
    ])
    }
  • mapMutations:使用mapMutations辅助函数将组件中的methods映射为store.commit调用。
    methods: {
    // 将this.tips映射成 this.$store.commit(‘tips’)
    …mapMutations([‘tips’])
    }
  • mapAction:使用mapActions辅助函数将组件中的methods映射成store.dispatch调用
    methods: {
    // 将this.tips映射成 this.$store.dispatch(‘tips’)
    …mapActions([‘tips’])
    }

5、命名空间

  • 概念:默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的。
  • 弊端1:不同模块中有相同命名的mutations、actions时,不同模块对相同的 mutation 或 action 作出响应。
  • 弊端2:当一个项目中store分了很多模块的时候,使用辅助函数时,就很难查询,不便于后期的维护。

可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
在模块中添加 namespaced: true, 开始命名空间。在根store中引入模块并挂载,在组件中使用,模块中定义的“permissionList” state

  1. 第一种方式:导入辅助函数mapState
    import { mapState } from “vuex”;
    export default {
    props: {
    data: {
    type: Object,
    default: “chart”
    }
    },
    data() {
    return {
    list: {}
    };
    },
    computed: {
    // 在辅助函数mapState的第一参数上,填写上模块的命名空间名。根据挂载方式不同,此处的命名空间名就是 wechatType 或 aaa。
    …mapState(‘命名空间名’, [“permissionList”])
    },
  2. 第二种方式:通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象,对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
    import { createNamespacedHelpers } from “vuex”;
    const { mapState } = createNamespacedHelpers(‘命名空间名’)
    export default {
    computed: {
    …mapState([“permissionList”])
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值