vuex mapgetters（怎样使用vuex操作state对象）

本文目录

• 怎样使用vuex操作state对象
• vuex中如何使用对象展开运算符实例详解
• vuex 调用方法总结
• 如何使用vuex结合localstorage动态监听storage变化
• 模块化vuex，获取、设置数据，及刷新保留数据方法
• Vuex简单使用
• Vue笔记（Vuex全局状态管理器）
• vuex store.dispatchvuex dispatch 传参怎么获得
• vuex里mapgetters获得的数据怎么赋值出去
• vue: 解决vuex页面刷新数据丢失问题

怎样使用vuex操作state对象

这次给大家带来怎样使用vuex操作state对象，使用vuex操作state对象的注意事项有哪些，下面就是实战案例，一起来看一下。
Vuex是什么？
VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。
Vue有五个核心概念，state, getters, mutations, actions, modules。
总结
state =》 基本数据
getters =》 从基本数据派生的数据
mutations =》 提交更改数据的方法，同步！
actions =》 像一个装饰器，包裹mutations，使之可以异步。
modules =》 模块化Vuex
State
state即Vuex中的基本数据！
单一状态树
Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。state作为构造器选项，定义了所有我们需要的基本状态参数。
在Vue组件中获得Vuex属性
?我们可以通过Vue的Computed获得Vuex的state，如下：
const store = new Vuex.Store({
state: {
count:0
}
})
const app = new Vue({
//..
store,
computed: {
count: function(){
return this.$store.state.count
}
},
//..
})下面看下vuex操作state对象的实例代码
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
每一个 Vuex 应用的核心就是 store（仓库）。
引用官方文档的两句话描述下vuex：
1，Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2，你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
使用vuex里的状态
1，在根组件中引入store，那么子组件就可以通过this.$store.state.数据名字得到这个全局属性了。
我用的vue-cli创建的项目，App.vue就是根组件
App.vue的代码
《template》
《p id="app"》
《h1》{{$store.state.count}}《/h1》
《router-view/》
《/p》
《/template》
《script》
import store from ’@/vuex/store’;
export default {
name: ’App’,
store
}
《/script》
《style》
《/style》在component文件夹下Count.vue代码
《template》
《p》
《h3》{{this.$store.state.count}}《/h3》
《/p》
《/template》
《script》
export default {
name:’count’，
}
《/script》
《style scoped》
《/style》store.js的代码
import Vue from ’vue’
import Vuex from ’vuex’
Vue.use(Vuex);
const state = {
count: 1
}
export default new Vuex.Store({
state，
})2，通过mapState辅助函数得到全局属性
这种方式的好处是直接通过属性名就可以使用得到属性值了。
将Component.vue的代码进行改变
《template》
《p》
《h3》{{this.$store.state.count}}--{{count}}《/h3》
《h4》{{index2}}《/h4》
《/p》
《/template》
《script》
import { mapState,mapMutations,mapGetters } from "vuex";
export default {
name:’count’,
data:function(){
return {
index:10
}
},
//通过对象展开运算符vuex里的属性可以与组件局部属性混用。
computed:{...mapState(),
index2() {
return this.index+30;
}
} ,
}
《/script》
《style scoped》
《/style》相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
如何使用vue中filter
怎样使用vue判断dom的class

vuex中如何使用对象展开运算符实例详解

当需要进行vuex进行数据状态管理的时候，会使用到mapGetters,mapState,还有自身的计算属性的时候，这个时候就会用到这个了！本文主要和大家介绍vuex中使用对象展开运算符的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
1.首先需要安装
npm install babel-plugin-transform-object-rest-spread -D2.需要在.babelrc文件中新增以下
{
"presets": [

],
"plugins": //增加这一行
}3.在vue组件中使用

vuex 调用方法总结

1.在vue组件里面引用：

import {mapState, mapGetters, mapMutations, mapActions}

mapState:   computed属性里面 声明

mapGetters:  computed属性里面 声明
mapMutations: methods属性里面 声明

mapActions: methods属性里面 声明
2.在js直接调用state：

import store from ’@/store’;

const { crmToken, userInfo } = store.state;---------调用state

store.dispatch(’setLogout’); --------调用actions方法

store.commit(’SET_ERR_MSG’, errMsg);-----调用方法
3.vuex 引入element-ui 并使用

import{ Message } from ’element-ui’;

Message.error({

    message: s.errMsg,

    onClose: () =》 {

        s.showErrorMsg = false;

    },

});

如何使用vuex结合localstorage动态监听storage变化

这次给大家带来如何使用vuex结合localstorage动态监听storage变化，使用vuex结合localstorage动态监听storage变化的注意事项有哪些，下面就是实战案例，一起来看一下。
需求：不同组件间共用同一数据，当一个组件将数据发生变化时，其他组件也可以响应该变化。
分析：vue无法监听localstorage的变化。localstorage主要用于不同页面间传值，vue适合组件间传值。对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据（vuex在页面刷新的时候存储的值会丢失，localstorage存储在本地浏览器中），可以采用vuex+localstorage的方式。
关于vuex和storage的区别
1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地
2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。
3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。
注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别1。
***隐藏网址***
实现过程：以首页展示用户头像信息，修改个人信息在公共组件头部组件中为例，当用户修改个人信息时首页的图片实时变化，如果不对头像信息做存储更新，每次用户修改完只有刷新页面或者从其他页面返回回来才能看到变化，即新设置的头像信息，仅展示核心代码。
1.首先先定义一个变量在state中。State负责存储整个应用的状态数据，后期就可以使用this.$store.state直接获取状态。也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去。
const state = {
imgInfo:null //首页头像信息
}2.mutations里面存储localstorage的信息。Mutations可以更改状态，本质就是用来处理数据的函数，其接收唯一参数值state。定义的mutation必须是同步函数。this.$store.commit(mutationName)是用来触发一个mutation的方法，或者使用辅助函数mapMutations直接将触发函数映射到methods上，这样就能在元素事件绑定上直接使用了。
export const SETIMGINFO = ’SETIMGINFO’
(state,info) {
state.imgInfo=info
localStorage.setItem(’imgInfo’,info)
}3.getter里面获取localstorage的信息。有些状态需要做二次处理，就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。
getImgInfo(state){
if(localStorage.getItem(’imgInfo’)){
state.imgInfo=localStorage.getItem(’imgInfo’)
}
return state.imgInfo
}4.在需要对storage进行操作的页面引用mapMutations函数
import {mapMutations} from ’vuex’ //引入mapMutations
...mapMutations([
’SETIMGINFO’
]),
this.SETIMGINFO(this.imgInfo)
//在需要的地方引用 mutations里面定义的方法5.在需要获取storage信息的页面引用mapGetters辅助函数
import {mapGetters} from ’vuex’
computed:{
...mapGetters([
’getImgInfo’
])
},
watch:{ //动态监听state的变化，实时改变页面的数据
getImgInfo: function(li) { //li就是改变后的state里面的imgInfo
let vm = this;
this.imgInfo=li //data声明一个变量，在html引用。如果storage的值发生变化就实时刷新变量的值。
}
},6.模板中对vuex的值的引用
《img :src="imgInfo?imgInfo:info.avatar"》
//三元不等式，如果state发生变化有值就赋值给img标签，如果没有即刚进页面就赋值给create生命周期函数中从接口读出来的数据相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
JS实现雪花飘落动画步骤详解
怎样使用Vue+canvas实现移动端手写板功能

模块化vuex，获取、设置数据，及刷新保留数据方法

1.模块化vuex
2.获取vuex中的数据
3.设置vuex中的数据
4.刷新之后，保留数据

数据结构

index.js

transaction.js模块

注意：namespaced是为了解决不同模块命名冲突的问题,分两种情况来写

获取vuex中的数据

设置vuex中的数据

如果将namespaced设置为false，则需要注意命名不能重复

也可以使用mapState,mapGetters,mapActions
安装

修改index.js配置，将数据保存到sessionStorage

Vuex简单使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
如果一份数据需要在多个组件中使用，组件间传值又比较复杂，就可以使用vuex托管数据。

state选项： 定义状态（状态就是数据）。
mutations选项： 定义修改状态的方法（注意：这里面只能定义同步方法）。

$store： 返回的是当前项目中的全局状态对象。
commit()方法： 用于执行指定的mutations里面的方法。

在组件中，直接通过$store.state就可以获取到全局状态对象管理的状态数据，直接渲染到页面。

state选项： 定义状态（状态就是数据）。

通过 $store.state.数据名 使用。

getters选项： 定义计算属性。方法的参数是状态对象。

通过 $store.getters.属性名 使用计算属性。

mutations选项： 定义修改状态的方法（注意：这里的方法一般都是同步方法）。方法的第一个参数是状态对象，第二个参数是新值。

通过 commit() 方法，调用mutations里面的方法。

actions选项： 定义操作状态的方法（这里的方法可以定义异步方法）。
注意： actions里的方法最好不要直接操作state状态，而是通过调用mutations里面的方法去修改状态。所以，actions直接操作的是mutations。

通过 dispatch() 方法，调用actions里面定义的方法。

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

namespaced属性： 默认情况下，action、mutation 和 getter 是注册在全局命名空间的。通过设置namespaced属性为true，将action、mutation 和 getter全部注册到私有命名空间中。

要从私有模块中获取数据，方式是： $store.state.模块名称.模块的数据 。

要从私有模块中获取计算属性，方式是： $store.getters 。

调用私有模块里面的mutations定义的方法，方式是： $store.commit(’模块名/方法名’,新值) 。

调用私有模块里面的actions定义的方法，方式是： $store.dispatch(’模块名/方法名’,新值) 。

直接在模板中使用全局状态管理数据，表达式会写的很长。所以可以使用计算属性。

通过映射函数mapState、mapGetters、mapActions、mapMutations，可以将vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，便于操作vuex.store。

如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapState 映射函数，自动生成页面中的计算属性。
如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapGetters 映射函数，自动生成页面中的计算属性。
注意： 如果要映射模块里面的state/getters，函数的第一个参数设置为模块的名称。

如果定义的方法名跟全局管理对象中mutations里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapMutations 映射函数生成方法。
如果定义的方法名跟全局管理对象中actions里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapActions 映射函数生成方法。
注意： 如果要映射私有模块中mutations/actions里面的方法，函数的第一个参数设置为模块的名称。

Vue笔记（Vuex全局状态管理器）

全局状态管理器，可以在项目的任何一个组件中去获取和修改，修改可以得到全局响应的变量

vue-cli2 项目中安装vuex，使用 npm install vuex --save

安装成功后，在src目录下新建一个store文件,里面创建一个js文件

在js文件中写入：

然后在main.js文件中引入 store 并注册到 vue 实例中

vuex的文件配置到这里就完成了

现在再回去看store文件里的参数，这几个对象就是vuex五大核心：

State ：可全局访问的对象
Getter ：和vue的computed一样，用来实时监听state的值的变化（最新状态）
Mutation ：存放改变state值的方法（同步）
Action ：触发mutations里面的方法（异步）
module ：模块

State是存储在Vuex中的数据对象，和Vue实例中的data一样。只不过State是可以全局访问的。

定义stata对象，直接在 state 里面定义 key:val ，它可以定义任意数据类型

在页面中获取state的值 使用 this.$store.state

在这里 state 通常都是挂载到 computed 计算属性上，这样当state的值发生改变的时候都能及时的响应。
当然也能用到 watch 去监听

State中的辅助函数 mapState
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

输出

Vuex 允许我们在 store 中定义 getter （可以认为是 store 的计算属性）。就像计算属性 computed 一样， getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值( state 中的属性)发生了改变才会被重新计算。

Getter的作用就是用来实时监听state的值的变化

定义Geters对象
使用 state 作为其第一个参数
可以使用其他 getter 函数作为第二个参数

在页面中使用getters，使用 this.$store.getters

Getters中的辅助函数 mapGetters
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

输出

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

使用 state 作为第一个参数

使用 this.$store.commit(’方法名’) 触发mutations中的方法

输出

而第二参数官方解释叫 提交载荷（Payload）
可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

简单来说就是可以在在第二参数里传入额外的参数

这里还是用name来做例子

输出

在 Vuex 中，mutation 必须是同步函数

Action 可以包含任意异步操作，Action的作用就是异步触发Mutations

定义action对象
接收一个 context 参数和一个要变化的形参
context 与 store 实例具有相同的方法和属性，所以他可以执行 context.commit("") ，也可以使用 context.state 和 context.getters 来获取 state 和 getters 。

使用 this.$store.dispatch("方法名") 方法执行Actions

输出

同样Action还支持载荷方法，传入第二形参

输出

其中 module 的作用是可以把 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

主要是为了解决由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

简单来说就是可以把vuex模块化

vuex store.dispatchvuex dispatch 传参怎么获得

vue 1里有$emit和$dispatch，前者不冒泡，后者会冒泡，vue 2里取消了冒泡，全部$emit
还可以用vuex 定义一个全局的state，子组件修改state 父组件可以访问到state的值

vuex里mapgetters获得的数据怎么赋值出去

我刚刚仔细阅读文档明白了，getters在别得地方调用不需要括号
也就是vuex将getters里面的函数对外暴露为一个属性，而不是一个方法。

vue: 解决vuex页面刷新数据丢失问题

1、一般在登录成功的时候需要把用户信息，菜单信息放置 vuex 中，作为全局的共享数据。但是在页面刷新的时候 vuex 里的数据会重新初始化，导致数据丢失。因为 vuex 里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，vuex 里面的数据就会被清空。
2、我在一个组件（例如登录组件页面）中登录了后，其它页面要怎么获取和响应这个变化，使用通过计算属性实现响应数据的变化，mapGetters 获取 vuex

但是刷新页面后数据丢失了！！