vuex的基本使用教程

热门标签

,
admin

发表文章数:3125

首页 » 网络资源 » 正文

vuex的基本使用教程

vuex的基本使用

一、简单实用vuex

1.通过命令npm install vuex --save下载vuex

2.在main.js文件中

//引入vuex组件
import Vuex from 'vuex'
//使用vuex组件
Vue.use(Vuex)
//创建vuex实例
const store = new Vuex.Store({
   //定义数据
   state:{
       count:0
   }
})
//在vue实例中使用
new Vue({
   store
   ...
})

3.在文件中使用数据,可以直接通过计算属性获取vuex值

computed:{
   count(){
       return this.$store.state.count
   }
}

4.可以直接通过赋值this.$store.state.count方法改变vuex值(不推荐,见后面)

二、将vue封装成一个组件

1.新建一个文件命名为store.js内容如下:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
   state: {
       count: 1
   }
})

2.在main.js中引入文件,并使用

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
   store,
   render: h => h(App)
}).$mount('#app')

三、vuex进阶:getters/mutations/actions

1.getters获取数据并做一些逻辑运算

我们可以在vuex中使用getters来做一些重复性的运算如下

new Vuex.Store({
   state: {
       count: 0
   },
   getters:{
       //获取双倍的count
       doubleCount(state){
           return state.count*2
       }
   }
})

在页面中,可以通过this.$store.getters.doubleCount获取到上面的双倍count

2.mutations数据状态管理

在vuex中,可以直接通过this.$store.state.count来修改数据,但是vuex是不希望我们直接这么做的,因为这样我们无法追踪到数据变化的状态,于是我们需要使用mutations来实现数据改变状态管理,如下:

new Vuex.Store({
   state: {
       count: 0
   },
   mutations:{
       //count加1
       addCount(state){
           state.count  ;
       },
       //count减法操作带传值
       decCount(state,num){
           state.count-=num;
       }
   }
})

在页面通过调用this.$store.commit("addCount")来操作vuex里面的数据

通过调用传值this.$store.commit("decCount",5)实现每次减5的操作,注意,需要传多个值的话,只需要将第二个参数改为对象即可

vuex的基本使用教程

这样,vuex中改变的数据可以在浏览器里的vue管理工具上查看改变的状态

注意:mutations内必须为同步的代码

3.actions异步管理数据

当遇到一些异步操作时,我们可以通过actions来管理

new Vuex.Store({
 state: {
   count: 0
 },
 getters: {
   //获取双倍的count
   doubleCount(state) {
     return state.count * 2
   }
 },
 mutations: {
   //count加1
   addCount(state) {
     state.count  ;
   },
   //count减1
   decCount(state) {
     state.count--;
   }
 },
 actions: {
   actionsIncrease(context) {
     setTimeout(() => {
       //context为当前上下文
       context.commit("decCount", 5)
     }, 1000)
   }
 }
})

在页面通过调用this.$store.dispatch("actionsIncrase")来操作vuex里面的数据(若是需要传值,与mutations相同)

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《vuex的基本使用教程》 发布于2019-12-05

分享到:
赞(0) 打赏

评论 抢沙发

4 + 1 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册