欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vuex的基本使用

程序员文章站 2022-06-27 11:52:40
...

相对于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

Vuex的基本使用


然后编写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
  }


相关标签: vue2.0 vuex