1.vuex是基于vue框架的一个状态管理库,它采用集中式的存储了所有组件的状态(数据、事件...)
2.应用场景:大、中型项目
3.安装
npm install vuex -S
二、vuex的使用
1.在App.vue的同级新建文件夹store
2.在store中新建index.js
在index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
//存储的是数据,相当于之前的data
const state = {
num: 5
}
//存储事件的,相当于之前的methods
const mutations = {
add(state){
state.num++
},
reduce(state){
state.num--
}
}
export default new Vuex.Store({
state, //名字随意起,对应即可,抛出数据
mutations //抛出事件
})
在main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
...
new Vue({
el: '#app', //是index.html里的id名
router, //路由
store, //vuex
components: { App },
template: '<App/>'
})
在其他组件中:
<div>{{$store.state.num}}</div>
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
<!-- state对应store--const定义的名字 -->
<!-- num--对应数据的名字 -->
<!-- add也是对应store里边的方法名 -->
网友评论