牛骨文教育服务平台(让学习变的简单)
博文笔记

Vuex的基本使用

创建时间:2017-06-03 投稿人: 浏览次数:1091

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


声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。