Vuex的使用

现实在做噩梦
276 阅读2分钟

今天无意中看了下Vue官网对于Vuex的介绍，感觉这真的只是介绍啊！！！所以还是决定记录下Vuex的使用吧。

为什么要使用Vuex

我的理解是为了在多组件之间实现数据或者状态的共享与同步。因为我们的页面是由多个组件构成的，如果某些情况下需要在多个组件之间共享数据，如果单单通过在data中维护一份数据实现共享，一是写法会比较繁琐，二是不好维护，所以就有了Vuex的出现。类似的功能框架有很多，比如React中通过Redux,移动端如Android通过LiveData+ViewModel或者单纯的通过本地数据库来实现。

安装

如果使用vue-cli搭建脚手架的话，我们在创建项目的时候选择Vuex就可以了。如果要在项目中引入，通过

npm install vuex -S

使用

一、首先我们需要创建store.js文件，导入Vue和Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations:{
   
  },
  actions:{
    
  },
})

这里的state可以定义我们全局的变量，如count。这样我们就可以在组件的任何地方通过 $store.state.count来使用了

<template>
  <div class="home">
    <div>{{$store.state.count}}</div>
  </div>
</template>

二.修改state中的值

在实际项目开发中我们一般需要动态修改state中的值，但是需要注意的是组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变或者在 multations 定义操作state值的方法，将state作为参数传进去，通过调用store.commit方法提交改变。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        setMessage(state) {
            state.count++
        }
    },
})

<!--布局文件-->
<template>
  <div class="home">
    <div>{{$store.state.count}}</div>
    <img alt="Vue logo" src="../assets/logo.png" @click="$store.commit('setMessage')">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

这里的setMessage是我们定义的方法，点击图片时会触发setMessage的执行，state中的count会加一。

三、 actions的使用

这里的actions与mutations基本类似，只不过mutations操作的是state而actions操作的是mutations定义的方法。但是涉及到异步事件时需要在actions中执行而不能在mutations中。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        setMessage(state) {
            state.count++
        }
    },
    actions: {
        setMessageAction({ commit }) {
            commit('setMessage')
        },
        //异步事件
        incrementAsync ({ commit }) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            commit('increment')
            resolve()
          }, 1000)
        })
      }
    },

})
<!--布局文件-->
<template>
  <div class="home">
    <div>{{$store.state.count}}</div>
    <img alt="Vue logo" src="../assets/logo.png" @click="$store.dispatch('setMessageAction')">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

总结

最后附上官方提供的流程图，希望帮助大家更好地理解Vuex的工作原理。

avatar
文章
阅读
粉丝