国瑞个人博客

web前端开发博客

专注web前端发展

首页 > 前端 > vuex的简单介绍及使用方法

vuex的简单介绍及使用方法

vuex的简单介绍及使用方法

 2019年03月01日 作者: 国瑞个人博客 406次浏览

vuex是一个专门为vue.js设计的集中式状态管理架构。状态理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。
####例如：我们有几个页面要显示用户名称和用户等级，或者显示用户的地理位置。如果我们不把这些属性设置为状态，那每个页面遇到后，都会到服务器进行查找计算，返回后再显示。

1.引入vuex

（1）利用npm包管理工具，进行安装vuex.在控制命令行中输入
1
npm install vuex --save

需要注意的是这里一定要加上 –save，因为这个包我们在生产环境中是要使用的。

（2）新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。
1
2
3
import Vue from 'vue';
import Vuex from 'vuex';  
Vue.use(Vuex);

通过这三步的操作，vuex就算引用成功了

用export default封装代码，让外部可以引用

1
2
3
export default new Vuex.Store({
    state
})

在.vue文件下使用store.js的代码

（1）引入store.js文件
1
2
3
4
5
6
7
8
9
import store  from '@/vuex/store'  
export default{
    data(){
        return{
            msg:'hello vueX'
        }
    },
    store
}

PS：data下面加上store

（2）使用store.js的代码

{{$store.state.count}}

2.state访问状态对象

（1）通过computed的计算属性直接赋值

computed属性可以在输出前，对data中的值进行改变。

1
2
3
4
5
computed:{
    count(){
        return this.$store.state.count;
    }
}

这里需要注意的是return this.$store.state.count这一句，一定要写this，要不你会找不到$store的。这种写法很好理解，但是写起来是比较麻烦的，

（2）mapState 辅助函数

首先要用import引入mapState

1
import {mapState} from 'vuex';

然后还在computed计算属性里写如下代码：

1
2
3
 computed:mapState({
   count:state=>state.count
})

这里我们使用ES6的箭头函数来给count赋值。

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed:mapState(['count'])

（3）对象展开运算符
1
2
3
4
5
6
computed: {
    ...mapState({
       //...
    })

}

3.Mutations修改状态

1
$store.commit()

Vuex提供了commit方法来修改状态

.vue文件：

1
2
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>

store.js文件：

1
2
3
4
5
6
7
8
const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

传值：
在项目中我们常常要在修改状态时传值，就需要再mutations里再加上一个参数，并在commit的时候传递就可以了。

store.js文件:

1
2
3
4
5
6
7
8
const mutations={
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}

.vue文件:

1
2
<button @click="$store.commit('add',10)">+</button>
<button @click="$store.commit('reduce')">-</button>

模板获取mutations方法
在实际开发中我们也不喜欢看到$store.commit()这样的方法出现，我们希望和调用模板里的方法以一样。

例如：@click=”reduce” 就和没饮用vuex插件一样。
使用这种写法：

（1）.在模板count.vue里用import引入我们的mapMutations.
1
import { mapState,mapMutations } from 'vuex';
（2）.在模板的<’script’>标签里添加methods属性,并加入mapMutations
1
2
3
methods:mapMutations([
   'add','reduce'
]),

修改后使用方法：

1
2
<button @click="add(10)">+</button>
<button @click="reduce">-</button>

4.getters计算过滤操作

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑，相当于对数据的一个过滤和加工。可以看作store.js的计算属性。

首先要在store.js里用const声明getters属性

1
2
3
4
5
const getters:{
    count:function(state){
        return state.count +=100;
    }
}

通过属性访问
store.getters.count // count+100;
mapGetters简化模板写法：
首先用import引入我们的mapGetters

1
import { mapState,mapMutations,mapGetters } from 'vuex';

在computed属性中加入mapGetters

1
...mapGetters(["count"])

5.actions异步修改状态

actions和Mutations功能基本一样，不同的是，actions是异步的改变state状态，而Mutations是同步改变状态。

在store.js中声明actions，actions是可以调用Mutations里的方法的，

1
2
3
4
5
6
7
8
const actions ={
    addAction(context){
        context.commit('add',10)
    },
    reduceAction({commit}){
        commit('reduce')
    }
}

context: 上下文对象，这里可以理解称store本身。
{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

模板中的使用，mapActions 和上面的模板方法一样。

百度已收录

点击快速分享：

以上就是国瑞前端个人博客带来的是《vuex的简单介绍及使用方法》，感谢您的观看！

如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/1329.html

「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」

赞( 0 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
赏 0

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签：

上一篇：

下一篇：

相关文章：

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..

博主独立研发主题：

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群，主要和前端相关，欢迎广大前端（抱有学习目的均可）爱好者加入！广告请勿添加！

最近更新

升级版本

web前端开发博客，基于vue脚手架制作的前端博客正在制作中，尽情期待，目前示例的代码位于此处

最新版本（尽请期待）-web前端开发博客

随机文章

文章分类

前端开发 web前端技术 新手Web技术 Web资源分享 国瑞前端博客

标签云

Javascript教程 小技巧 web前端技术 前端特效 Vue 基础 web基础 ECMAScript6 Html+Css Css3 新手Web技术 iview 国瑞前端 Html5 Vue-Cli Jquery教程 Vuex Php iview-table Wordpress web游戏开发 Banner Less element-ui Axios wordpress小技巧 Vue-router教程 Html 背景图 Render Canvas Switch Css 文件上传 array 网站优化技术 Promise Webpack Gulp 插件 雪碧图 精灵图 断点调试 抽奖转盘 wordpress插件 坚持 清除浮动 网站推荐 微信小程序教程 控制台报错 浮动 前端网址 Apache eslint 文件管理系统 target vscode esint ECharts Javascript Node.js BOM对象 博客 获取IP 自学 Vscode插件 css清除默认样式 cnpm live-server node插件 nuxt.js 专升本 postman 开源项目 blog Flutter Ajax 城市 textarea Module 网站优化 闭包 true-value 模板字符串 json jquery String trim Object 地址 分页 mixins 混合 function media nav 二级导航 https watch game upload 娱乐天地

精彩评论

本站主要提供服务

二年web前端开发博客，本站专注提供web资源下载，技术问题解答，经验分享，也提供新手的web技术指导，二年前端个人博客，期待你的加入!

站点统计

  • 文章总数： 269 篇
  • 草稿数目： 50 篇
  • 分类数目： 26 个
  • 页面总数： 16 个
  • 评论总数： 223 条
  • 链接总数： 10 个
  • 标签总数： 104 个
  • 建站时间： 808 天
  • 注册用户： 659 人
  • 访问总量： 8785341 次
  • 最近更新： 2019年7月15日

鄂ICP备17006592号-2

该网站已运行 :

友情链接： 国瑞前端目录 web前端开发 前端资源下载 前端学习工具下载

网站地图（xml） 网站地图（html）

© 2017-2019 国瑞前端

-->