vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vuex的五大属性和使用

几分钟弄懂Vuex的五大属性和使用方式

作者:燕穗子博客

这篇文章主要介绍了几分钟弄懂Vuex的五大属性和使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

一、Vuex是什么?

介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

理解:核心就是 store(仓库),仓库是用来干什么的?你就当它用来储存东西的。

二、我们什么时候应该用到Vuex呢?

a.小应用不建议使用Vuex,因为小项目使用 Vuex 可能会比较繁琐冗余;

b.中大型单页应用,因为要考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择;

三、对于使用Vuex的理解是什么?

由于Vue是单向数据流,子组件内部不能直接修改从父级传递过来的数据,子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话,可以借助子组件 A 向父组件传值,父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

但是这样会有一个问题,就是如果子组件 A 的父组件上面还有一层爷爷组件,或者还有更多祖父类型的层级,那么是不是会很麻烦。

因此,我们会想到能不能我们将一个共有的数据存在一个特定的地方,用的时候自己去拿,这样就不需要一层层传值,于是乎 Vuex 就应运而生了。

四、vuex由五部分组成(五种状态/五种属性)

五、安装配置

第一步:npm i vuex --save/-S

第二步: 创建store.js 

第三步:挂载使用        Vue.use(vuex)

第四步:const store = new Vuex.Store({...配置项})

第五步:导出 export default store

第六步:导入main.js 在根实例配置 store 选项指向 store 实例对象

具体如下

安装

npm install vuex

创建store.js 

// 初始化一个vuex的实例(数据仓库) 导出即可
import Vuex from 'vuex'
import Vue from 'vue'
 
// 使用安装
Vue.use(Vuex)
 
// 初始化
const store = new Vuex.Store({
  // 配置(state|mutations|actions)
})
 
export default store

把store对象挂载到Vue实例中

import store from '@/store'
new Vue({
  // 把store对象挂载到vue实例对象中,这样就可以在所有的组件中获取store中的数据了
  store,
  render: h => h(App),
}).$mount('#app')

六、详解五种状态

1、state

初始化state

状态state用于存储所有组件的数据。

管理数据

// 初始化vuex对象
const store = new vuex.Store({
  state: {
    // 管理数据
    count: 0
  }
})

在组件获取state的数据:原始用法插值表达式

<div>A组件 state的数据:{{$store.state.count}}</div>
<div>A组件 state的数据:{{count}}</div>

使用计算属性:

// 把state中数据,定义在组件内的计算属性中
computed: {
  // 1. 最完整的写法
  // count: function () {
  //   return this.$store.state.count
  // },
  // 2. 缩写
  count () {
    return this.$store.state.count
  }
}
// 不能使用剪头函数  this指向的不是vue实例

注意:

mapState

目标:简化获取store数据的代码

把vuex中的state数据映射到组件的计算属性中。

import { mapState } from 'vuex'

1.使用:mapState(对象)

// 使用mapState来生成计算属性  mapState函数返回值是对象
// 使用mapState使用对象传参
// computed: mapState({
//   // 1. 基础写法 (state) 代表就是vuex申明的state 
//   // count: function(state) {
//   //   return state.count
//   // }  
//   // 2. 使用箭头函数
//   // count: state => state.count
//   // 3. vuex提供写法 (count是state中的字段名称)
//   count: 'count',
//   // 4. 当你的计算属性 需要依赖vuex中的数据 同时  依赖组件中data的数据
//   count (state) {
//     return state.count + this.num
//   }
// })

2.使用:mapState(数组)

// 2、mapState参数是一个数组
// computed: mapState(['count', 'total'])

3.如果组件自己有计算属性,state的字段映射成计算属性

// 3、即在内部保留原有的计算属性,又要把store中的数据映射为计算属性
computed: {
  // 组件自己的计算属性
  calcNum () {
    return this.num + 1
  },
  // 把mapState返回值那个对象进行展开操作(把对象的属性添加到该位置)
  ...mapState(['count'])
}

2、mutations

基本操作

目标:Vuex规定必须通过mutation修改数据,不可以直接通过store修改状态数据。

为什么要用mutation方式修改数据?Vuex的规定

为什么要有这样的规定?统一管理数据,便于监控数据变化

定义状态修改函数

// mutations是固定的,用于定义修改数据的动作(函数)
mutations: {
    // 定义一个mutation,用于累加count值
    // increment这个名字是自定义的
    increment (state, payload) {
        // state表示Store中所有数据
        // payload表示组件中传递过来的数据
        state.count = state.count + payload
    },
    decrement (state, payload) {
      state.count = state.count - payload
    }
}

组件中调用

  methods: {
    handleClick1 () {
      // 通过触发mutation修改state中的count的值
      this.$store.commit('increment', 2)
    },
    handleClick2 () {
      this.$store.commit('decrement', 1)
    }
  },

总结:

先定义(mutations),再出发 this.$store.commit(‘mutation的名称,参数’)

mutation的本质就是方法,方法名称自定义,mutation函数内部负责处理的变更操作。

一种操作就是一个mutation,不同的mutation处理不同的场景。

mapMutations

methods: {
    // 1、对象参数的写法
    // ...mapMutations({
    //   // 冒号右侧的increment是mutation的名称
    //   // 冒号左侧的increment是事件函数的名称,可以自定义
    //   increment: 'increment'
    // })
    // 2、数组参数的写法(事件函数名称和mutation名称一致)
    ...mapMutations(['increment'])
    // 3、这种写法和第2种等效
    // increment (param) {
    //   // 点击触发该函数后要再次触发mutation的
    //   this.$store.commit('increment', param)
    // }
}

总结:

3、action 基本使用

目标:主要用于处理异步的任务

安装axios的包

npm i axios
//导入包
import axios from 'axios'

定义获取数据方法

// actions是固定的,用于定义异步操作的动作(函数)
actions: {
    // 定义了一个action,用于查询接口数据
    async queryData (context, payload) {
        console.log(payload)
        // 调用接口获取数据
        const ret = await axios.get('http://test.zjie.wang/tab')
        // 必须触发mutation修改list的值
        // context类似于this.$store
        context.commit('updateList', ret.data.list)
    }
},
mutations: {
    updateList (state, payload) {
      state.list = payload
    }
}

组件使用:

methods: {
    handleQuery () {
        // 触发action(必须调用dispatch方法)
        this.$store.dispatch('queryData', 111)
    }
}

mapActions

// 相当于 methods申明了一个函数fn(num){ this.$store.dispatch('queryData', num)} 
// ...mapActions({
//   fn: 'queryData'
// })
// 相当于 methods申明了一个函数getData(num){ this.$store.dispatch('getData', num)} 
...mapActions(['queryData'])

总结:

4、getters用法

目标:熟悉getters的应用场景和具体使用步骤

先定义getters

// 相当于state的计算属性(基于State处理成另外一份数据)
// getters的主要应用场景:模板中需要的数据和State中的数据不完全一样
// 需要基于state中的数据进行加工处理,形成一份新的的数据,给模板使用
getters: {
    getPartList (state) {
        return state.list.filter(item => {
            return item.id > 1
        })
    }
}

再使用getters

1.基本使用

caleList () {
  // 注意:获取getters的值,不需要加括号(当属性使用)
  return this.$store.getters.getPartList
},

2.简化用法

import { mapGetters } from 'vuex'
// mapGetters的作用:把getters映射为计算属性
computed: {
    ...mapGetters(['getPartList']),
    // ...mapGetters({
    //   calcList: 'getPartList'
    // }),
    // calcList () {
    //   // 注意:获取getters的值,不需要加括号(当属性使用)
    //   return this.$store.getters.getPartList
    // },
}

总结:

5、modules

使用单一状态树,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。

为了解决以上问题,Vuex 允许我们将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割:

例如:分模块形式管理数据,比如user模块管理用户信息数据,cart模块管理购物车数据,shop模块管理商品信息数据。

import vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);
 
const state= ()=>{ token:''}
const actions = {
   set_token({commit},val){
     commit("to_token",val)
  }
}
const mutations = {
   to_token(state,val){
    state.token=val;
  }
}
const getters = {}
 
 
//user模块
let user = {
  namespaced: true, //一定要开始命名空间。
  state: { userid: 1234 },
  actions: {
  },
  mutations: {
    SET_USERID(state, val) {
      state.userid = val;
    }
  },
  getters: {
 
  }
}
 
//购物车数据的模块
let cart = {
  namespaced: true,
  state: { userid: 567 },
  actions: {
 
  },
  mutations: {
  },
  getters: {
 
  }
}
 
 
const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    user,
    cart
  },
  plugins: [createPersistedState({
    storage: sessionStorage,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})
 
export default store

home.vue如何使用

获取user模块的`userid`

this.$store.state.user.userid
this.$store.commit("user/SET_USERID",12345)// 前面是指定模块user 中的SET_USERID 方法,后面是传参 可以是对象、数组、字符串等

七、数据持久化

问题:存储在vuex中的状态,刷新页面,会丢失。为了解决刷新页面数据丢失,才有了数据持久化。最简单的做法就是利用插件 vuex-persistedState。

1、安装

cnpm install vuex-persistedState -S

备注:

2、使用

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({
    storage: sessionStorage,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})

参数:

storage:存储方式。(sessionStorage,localStarage) key:定义本地存储中的key

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文