vuex是什么
- Vuex 是一个专为vue.js应用程序开发的状态管理模式;
- 说人话:公有数据放于公共区域,做数据共享,以便各个组件之前调用
vuex使用
npm i vuex -S
- 在一个模块化的打包系统中,必须显式的通过 Vue.use() 来安装 Vuex;
main.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //注册vuex到vue中
var store = new Vuex.Store({
state: { //类似于组件中的 data ,专门用来存储数据的
count: 0 //组建中访问输出 this.$store.state.*** 来访问
},
mutations: {
//注意:如果要操作store中的state值,只能调用mutations提供的方法,不推荐在组建中直接操作state中的数据,万一导致了数据紊乱,不能快速定位到错误源
increment(state){
state.count++
}
//注意:如果组件要调用mutations中的方法,只能使用this.$store.commit('方法名')
}
})
import App from './App.vue'
const vm = new Vue({
el:'#app',
render: c => c(App),
router: router,
store: store //挂载到vue实例上
})