vuex使用教程

2019-11-05 admin

序言:今天我们简单说一下vuex的使用,vuex是什么呢,相当于react的redux,如果项目使用数据过多的话,直接管理是非常不方便的,那么采用vuex,那些繁琐的问题就迎刃而解了,首先我们先看看官方对vuex的说明:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

**一、**说白了就是vue的状态管理,你只需要每次动态的改变这些状态就行,数据就会自动渲染,从第一步安装开始 1、安装vue项目

vue init webpack projectName

2、进入项目目录

cd projectName

3、安装vuex

npm i vuex --save

4、项目启动

npm run dev/npm start

ps:如果npm安装慢的话,建议使用淘宝镜像:cnpm 安装淘宝镜像:

npm i -g cnpm --registry=https://registry.npm.taobao.org

二、vuex的引入 项目安装成功以后,初始的文件目录格式都是一样的,像我这样 091804lno7ozzlja7t5iq7.png 然后我们简单的使用,在main.js中引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

记得一定要挂载使用它,就是这一句:Vue.use(Vuex) 三、在main.js中加入

var store = new vuex.Store({//store对象
    state:{    
        count:0  
    }
})

四、把刚才的store对象实例化到Vue中

new Vue({
    el: '#app',
    router,
    store,//加入store对象
    template: '<App/>',
    components: { App }
})

完成这一步我们就可以使用了,一个简单的vuex的state就可以了,怎么用呢

<div id="hello">
    <p>{{$store.state.count}}</p>
</div>

五、很明显,刚才只是简单的一例子,如果你需要做大型的项目,不可能把store对象写在main.js里,这样是非常不方便管理的,所以我们需要在src下新建一个文件夹store专门存放store对象,然后我们新建一个文件index.js

//index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
    state:{        
        count:0    
    }
})

相应的main,js就需要做修改了

import store from './store/index' 
new Vue({  
    el: '#app',
    router,
    store,//这个store是刚才创建的index文件引入的
    template: '<App/>',
    components: { App }
})

这样做就是为了把store对象分离出去,方便管理,但是你会发现这个store对象是全局的所有组件都可以使用,如果我们的组件多了,数据多了,全部堆放在一起,是不是特别臃肿,所以现在我们就该使用modules 首页我们新建一个js文件存放一个组件可能用到的store对象,比如我新建heade.js,在这里我们不需要引用vuex了,只需要默认export default就行了 //heade.js

export default {
    state: {
        count: 0    
    }
}

然后我们把在index.js中使用modules

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex); 
import HeadeStore from './heade';//引入刚才的heade.js export default new vuex.Store({
    modules: {
        Heade: HeadeStore    
    }
})

现在我们管理起来就方便多了,比如还有其他的呢我们放在modules下就可以了,比如,我们除了heade.js里管理的是一个组件的store对象,我们还有一个content.js来管理另外一个组件的store对象,那么我们在store文件夹下载新建一个content.js,和heade.js一样,只需要默认输出就可以了 //content.js

export default {
    state: {
        cont: '这是content内容'    
    }
}

然后我们在index.js中引入挂在modules下就可以啦

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex); 
import HeadeStore './heade';//引入刚才的heade.js
import ContentStore from './content' //引入content.js 
export default new vuex.Store({
    modules: {        
        Heade: HeadeStore,
        Content: ContentStore    
    }
})

这样是不是方便多了,但是怎么用呢,很简单,现在需要通过modules去找他,之前的方法:$store.state.count改成$store.state.Heade.count就行了,很明显这是找到了heade.js下的count值,那么找content.js下cont的值呢?一样的,换一下modules的名就行$store.state.Content.cont

//heade组件<p>{{$store.state.Heade.count}}</p>//content组件<p>{{$store.state.Content.cont}}</p>

输出结果分贝为:0,这是content内容  **六、**那么接下来你觉得问题解决了吗,难道你们的项目组件所有的状态都用这一个,那如果我需要动态的改变他的状态呢,怎么办?没事,这不mutations来了吗,问题就好多了,怎么用呢,这是干嘛的呢,说白了就是动态的改变state的值完成页面的同步渲染,看看用法吧,直接在state对象后面加就行了

//heade.js
export default {
    state: {
        count: 0    
    },    
    mutations: {
        Count (state) {         
            state.count =1      
        }    
    }
}

解释一下,mutations对象是函数,默认传值是state,也就是上面的state,所以可以直接操作state.count 怎么用呢,很简单,比如页面有一个按钮,点击改变state的count

<a href="javascript:;" @click="$store.commit('Count ')">click</a>

此时页面渲染为1 commit('Count ')调用mutations的固定方法,参数为mutations的方法名,当然commit不止传一个参数,也可以传很多,比如:

<a href="javascript:;" @click="$store.commit('Count',10)">click</a>

可以在heade.js的mutations下Count方法接收它

//heade.js
export default {
    state: {
        count: 0
    },    
    mutations: {
        Count (state,n) {
            state.count =state.count+n     
        }    
    }
}

此时输出结果为10

到这一步为止,我们已经可以正常的动态的修改state来渲染在页面了,你会发现,mutations是同步的,只要你在一个组件执行mutations的方法了,那所有的组件只要用到mutations的方法都会同步进行改变,这并不是我们想要的结果,所以,actions来解决问题了,写法一样

//heade.js
export default {
    state: {
        count: 0
    },    
    mutations: {
        Count (state,n) {
            state.count =state.count+n
        }    
    },    
    actions: {
        Acount (context) {
            context.commit('Count ')
        }    
    }
}

接着解释,actions和mutations的写法一样,都是函数,但是actions的默认参数是context,context.commit('Count ')的意思是触发mutations下的Count函数,那么怎么触发actions的函数呢,方法就是

<a href="javascript:;" @click="$store.dispatch('Acount')">click</a>

dispatch方法是官方固定触发actions下函数的方法 官方推荐 , 将异步操作放在 action 中

还有一个属性我觉得也没有必要说了,getters,解释一下它的作用 getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的。比如我们heade.js的state有一个值show:false getters就是计算与false相反的,但是它计算的值是不能直接修改的, 需要对应的 state 发生变化才能修改。

//heade.js
export default {
    state: {
        count: 0,
        show: false    
    },    
    mutations: {
        Count (state,n) {
            state.count =state.count+n      
        }    
    },    
    actions: {
        Acount (context) {
            context.commit('Count ')
        }    
    },    
    getters:{
        not_show(state){
            return !state.show;
        }    
    }
}

它也是默认接受state 最后一点就是为了方便操作开发,一般情况$store.state.Heade.show,$store.state.show写起来不是很方便,那么vuex的辅助函数mapState、mapGetters、mapActions就可以解决这个问题,办stroe对象那个映射到this

<template> 
    <div class="Heade">    
        <p>{{msg}}</P> 
    </div>
</template> 
<script>
import {mapState} from 'vuex';
export default {
    name: 'Heade',  
    data () {   
        return {
            msg: ''    
        }  
    },
    computed:{    //这里的三点叫做 : 扩展运算符    
        ...mapState([
            count:state=>state.Heade.count    
        ]),  
    },  
    created () {
        this.msg = this.count  
    }
}
</script>

现在我们就直接可以用this.count去找到state下count的值了,created方法是页面刚载入加载完事执行的方法,完后动态的赋值给msg,mapState一般放在computed计算属性中,mapActions一般放在methods下, 到这一步为止vuex的学习使用就结束了,你可以尽情的去操作数据了,也不用担心会混乱,如果您连我写的文档都看不懂,那你不适合学习vue,放弃吧! 哈哈哈哈

以上教程全部原创,手打,难免有错误的地方,请各位指正! 如果想一起学习,请添加个人微信群一起学习:lining88662200 demo地址 vuex官网

[转载]原文链接:https://segmentfault.com/a/1190000020912384

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78845.html

文章标题:vuex使用教程

相关文章
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
javascript教程:关于if简写语句优化的方法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化...
2015-11-12
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
回到顶部