五分钟搞懂Vuex实用知识

这段时间一直在用vue写项目，vuex在项目中也会依葫芦画瓢使用，但是总有一种朦朦胧胧的感觉。于是决定彻底搞懂它。

成都创新互联成都企业网站建设服务，提供网站设计制作、做网站网站开发,网站定制,建网站,网站搭建,网站设计,响应式网站设计,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:13518219792

看了一下午的官方文档，以及资料，才发现vuex so easy！

作为一个圈子中的人，决定输出一下文档，如果你仔细看完这篇文章，保证你对vuex熟练掌握。

我把自己的代码上传到了github，大家有需要的可以拉下来：github

先说一下vuex到底是什么？

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。

也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

vuex中，有默认的五种基本的对象：

  • state：存储状态（变量）
  • getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
  • mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
  • actions：异步操作。在组件中使用是$store.dispath('')
  • modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

下面我们正式开始，一步步使用vuex

1、首先创建一个vue-cli项目

执行下面的命令，创建一个app项目（这里也可以使用其他非webpack模板，以及非app名称）

 
 
 
    
  
  
  
  1. vue init webpack app
    2.

2、创建完成之后，我们进入文件夹下，并且运行项目

 
 
 
    
  
  
  
  1. cd app/
    2. 
  
  
  
  2. npm run dev
    3.

接下来我们在src目录下创建一个vuex文件夹

并在vuex文件夹下创建一个store.js文件

文件夹目录长得是这个样子

3、目前我们还没有引入vuex，我们需要先下载vuex，并且引入它

在保证我们处于我们项目下，在命令行输入下面命令，安装vuex

 
 
 
    
  
  
  
  1. npm install vuex --save
    2.

4、安装成功之后，我们就可以在store.js中尽情玩耍我们的vuex了！

在store.js文件中，引入vuex并且使用vuex，这里注意我的变量名是大写Vue和Vuex

 
 
 
    
  
  
  
  1. import Vue from 'vue'
    2. 
  
  
  
  2. import Vuex from 'vuex'
    3. 
  
  
  
  3. Vue.use(Vuex)
    4. 
  
  
  
  4. const state = {
    5. 
  
  
  
  5.  count: 0
    6. 
  
  
  
  6. }
    7. 
  
  
  
  7. export default new Vuex.Store({
    8. 
  
  
  
  8.  state
    9. 
  
  
  
  9. })
    10.

接下来，在main.js中引入store

 
 
 
    
  
  
  
  1. import Vue from 'vue'
    2. 
  
  
  
  2. import App from './App'
    3. 
  
  
  
  3. import router from './router'
    4. 
  
  
  
  4. import store from './vuex/store' // 引入store
    5. 
  
  
  
  5. Vue.config.productionTip = false
    6. 
  
  
  
  6. /* eslint-disable no-new */
    7. 
  
  
  
  7. new Vue({
    8. 
  
  
  
  8.  el: '#app',
    9. 
  
  
  
  9.  router,
    10. 
  
  
  
  10.  store,
    11. 
  
  
  
  11.  components: { App },
    12. 
  
  
  
  12.  template: ''
    13. 
  
  
  
  13. })
    14.

然我我们在任意一个组件中就可以使用我们定义的count属性了。

这里我们在helloWorld中使用一下，去除helloworld.vue中不用的标签

 
 
 
    
  
  
  
    2.

打开我们刚才运行项目的浏览器，可以看到已经使用成功了！

并且在vue开发工具中我们可以看到我们定义的变量count

到这一步，已经成功了一小半！vuex很简单吧？

回想一下，我们只需要在下载安装使用vuex，在我们定义的store.js中定义state对象，并且暴露出去。

在main.js中使用我们的store.js（这里是为了防止在各个组件中引用，因为main.js中，有我们的new Vue 实例啊！）

现在我们已经使用了vuex中的state，接下来我们如何操作这个值呢？ 没错！用mutations和actions

我们继续操作store.js文件

我们在sotre.js中定义mutations对象，该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。

我们在mutations中定义两个方法，增加和减少，并且设置一个参数n，默认值为0，然后在Vuex.Store中使用它

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  * mutations 里面放置的是我们操作state对象属性的方法
    3. 
  
  
  
  3.  */
    4. 
  
  
  
  4. const mutations = {
    5. 
  
  
  
  5.  mutationsAddCount(state, n = 0) {
    6. 
  
  
  
  6.  return (state.count += n)
    7. 
  
  
  
  7.  },
    8. 
  
  
  
  8.  mutationsReduceCount(state, n = 0) {
    9. 
  
  
  
  9.  return (state.count -= n)
    10. 
  
  
  
  10.  }
    11. 
  
  
  
  11. }
    12. 
  
  
  
  12. export default new Vuex.Store({
    13. 
  
  
  
  13.  state,
    14. 
  
  
  
  14.  mutations
    15. 
  
  
  
  15. })
    16.

然后我们在helloWorld.vue中，使用这个方法

还记得我们如何在组件中使用mutations吗？就和自定义事件非常相似

 
 
 
    
  
  
  
    2. 
 
 
 

 
 
 
    
  
  
  
  1. methods: {
    2. 
  
  
  
  2.  handleAddClick(n){
    3. 
  
  
  
  3.  this.$store.commit('mutationsAddCount',n);
    4. 
  
  
  
  4.  },
    5. 
  
  
  
  5.  handleReduceClick(n){
    6. 
  
  
  
  6.  this.$store.commit('mutationsReduceCount',n);
    7. 
  
  
  
  7.  }
    8. 
  
  
  
  8.  }
    9.

来浏览器看一下效果如何！

我们可以看到每当触发事件时，我们都可以在vue开发工具中看到我们触发的mutations方法，以及参数

完美！

接下来就是actions，actions是异步操作

创建actions对象，并且使用

这里我在两个方法中使用了两个不同的参数，一个是context，它是一个和store对象具有相同对象属性的参数。在第二个函数中，我是直接使用了这个对象的commit的方法。

凭大家喜好就行

 
 
 
    
  
  
  
  1. const actions = {
    2. 
  
  
  
  2.  actionsAddCount(context, n = 0) {
    3. 
  
  
  
  3.  console.log(context)
    4. 
  
  
  
  4.  return context.commit('mutationsAddCount', n)
    5. 
  
  
  
  5.  },
    6. 
  
  
  
  6.  actionsReduceCount({ commit }, n = 0) {
    7. 
  
  
  
  7.  return commit('mutationsReduceCount', n)
    8. 
  
  
  
  8.  }
    9. 
  
  
  
  9. }
    10. 
  
  
  
  10. export default new Vuex.Store({
    11. 
  
  
  
  11.  state,
    12. 
  
  
  
  12.  mutations,
    13. 
  
  
  
  13.  actions
    14. 
  
  
  
  14. })
    15.

在helloWorld.vue中

在methods中，增加两个方法，使用dispath来触发

 
 
 
    
  
  
  
  1. 异步操作
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  异步增加
    4. 
  
  
  
  4.  异步减少
    5. 
  
  
  
  5.  

 
 
 
    
  
  
  
  1. handleActionsAdd(n){
    2. 
  
  
  
  2.  this.$store.dispatch('actionsAddCount',n)
    3. 
  
  
  
  3.  },
    4. 
  
  
  
  4.  handleActionsReduce(n){
    5. 
  
  
  
  5.  this.$store.dispatch('actionsReduceCount',n)
    6. 
  
  
  
  6.  }
    7.

进入浏览器看下效果如何！

最后就是getters

我们一般使用getters来获取我们的state，因为它算是state的一个计算属性

 
 
 
    
  
  
  
  1. const getters = {
    2. 
  
  
  
  2.  getterCount(state, n = 0) {
    3. 
  
  
  
  3.  return (state.count += n)
    4. 
  
  
  
  4.  }
    5. 
  
  
  
  5. }
    6. 
  
  
  
  6. export default new Vuex.Store({
    7. 
  
  
  
  7.  state,
    8. 
  
  
  
  8.  mutations,
    9. 
  
  
  
  9.  actions,
    10. 
  
  
  
  10.  getters
    11. 
  
  
  
  11. })
    12. 
 
 
 

 
 
 
    
  
  
  
  1. {{count}}
    2. 
 
 
 

 
 
 
    
  
  
  
  1. const getters = {
    2. 
  
  
  
  2.  getterCount(state) {
    3. 
  
  
  
  3.  return (state.count += 10)
    4. 
  
  
  
  4.  }
    5. 
  
  
  
  5. }
    6.

getters算是非常简单的了。

到这里，如果全都看懂了，vuex你已经没有压力了。

但是vuex官方给了我们一个更简单的方式来使用vuex， 也就是 {mapState, mapMutations, mapActions, mapGetters}

只要我们把上面基础的搞懂，这些都不在话下，只是方面我们书写罢了。

就这么简单，这里我们用到了es6的扩展运算符。如果不熟悉的同学还是去看看阮一峰大神的《Es6标准入门》这本书，我是看完了，受益匪浅！

 
 
 
    
  
  
  
    2.

同理，getters和 state也可以使用 mapState，mapGetters

如果你更懒的话，我们可以使用数组，而非对象，或者es6里面的对象简写方式

就像这种

网页标题：五分钟搞懂Vuex实用知识
URL网址：http://www.shufengxianlan.com/qtweb/news38/304938.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站设计知识

分类信息网

商城网站建设　　 　成都服务器托管　　 　专业网站建设　　 　眉山联通机房　　 　成都app开发　　 　手机网站制作　　 　微信开发　　 　青年旅行社　　 　IDC机房托管　　 　网站报价方案　　 　力比特机械　　 　成都网站营销推广　　 　王君美油画　　 　成都定制网站建设　　 　达州电信机房　　 　金融行业网站建设方案　　 　成都包装设计公司　　 　网页设计制作　　 　珉田数据中心　　 　香港云主机