热门标签

,

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系QQ403593407!本站提供的所有教程/文章/软件均仅供测试学习,造成的后果与本站无关!请不要用作非法用途,本站将记录用户下载记录做保存,如用户后期有违法行为方便提供给警方。

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)

评论 抢沙发

9 + 3 =


电信无限流量卡
无限流量卡限时9.9元全国包邮!不限速无套路!25元/月享100G流量!35元/月享200G流量!55元享受500G流量!!
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册