Vuex的基本使用

相对于vuex来说,我看了一上午都没看懂,后来通过百度别人的Demo和反复查阅官方文档

终于大概了解vuex的主要用法,关于概念什么的就不多说了,直接看官网的更详细:https://vuex.vuejs.org/zh-cn/getting-started.html

下面说说在webpack中如何引入并使用vuex:

在 Vue 之后引入 vuex 会进行自动安装:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

NPM

npm install vuex --save

Yarn

yarn add vuex

然后在main.js中引入:


import store from './vuex/store'


接下来创建storoe.js



然后编写store.js的主要代码:

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

Vue.use(Vuex)

const store = new Vuex.Store({  

state: {  

count: 0 

}, 

mutations:{  

increment (state) {  

state.count++  

} 

}

}

})

 在App.vue或者其他组件中引入:

import store from './vuex/store'
可以在computed等其他地方这样引用,用法可以自己多去实践

computed: {
  main() {
    return store.state.count
  }


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值