简单几步使用 vuex

一、安装

 ~npm install vuex

二、使用:

1.创建文件夹 vuex

2.创建文件 store.js //存放所有状态

~store.js

import Vue from 'vue'

import Vuex from 'vuex'

import mutations from './mutations'

Vue.use(Vuex);

const state = {

httpUrl: ''

}

export default new Vuex.Store({

state,

mutations

})

3.创建文件 mutations.js //用于更改所有状态

~mutations.js

export default {

SET_HTTPURL(state, data) {

state.httpUrl = data;

console.log('设置url地址', data)

}

}

4.mian.js全局引入 store

import store from './vuex/store.js'

new Vue({

store,

.

.

.

})

5.组件中使用

引入 ~ import { mapMutations } from 'vuex' //用于更改状态,只是获取时候不需要

~ methods:{

...mapMutations({

setUrl: "SET_HTTPURL"

}),

set(){

this.setUrl('url')

}

},

computed:{

getUrl(){

return this.$store.state.httpUrl

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,962评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,034评论 4 111
  • 这两天在做Vue移动端的项目,正好用到了Vuex,记录一下相关知识。 一、安装 npm yarn Vuex是Vue...
    婷楼沐熙阅读 7,705评论 2 2
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,133评论 0 6
  • vuex是什么鬼? 如果你用过redux就能很快的理解vuex是个什么鬼东西了。他是vuejs用来管理状态的插件。...
    麦子_FE阅读 6,885评论 3 37