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