Vuex是什么?
http://vuex.vuejs.org/zh-cn/intro.html
如果无法理解,你可以理解为一种开发模式或框架。比如PHP有thinkphp,Java有spring等。
通过状态(数据源)集中管理驱动组件的变化(好比spring的IOC容器对bean进行集中管理)
vuex是以插件的方式存在的。
安装;
---
vuex里面有什么?
应用级的状态集中放在store中;
改变状态的方式是提交mutations,这是个同步的事物;
异步逻辑应该封装在action中
演练
1、新建一个store文件夹,新建一个index.js存放
import Vuex from 'vuex';
Vue.use(Vuex);
import abc from './modules/abc'
/*使用Vuex*/
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
abc
},
strict: true
})
2、在新建一个modules文件夹,里面新建一个abc.js,内容如下
const state = { //定义数据
abc:'',
abd:''
}
const mutations = {
abcs:function(store,item){ //提交数据的方法,第一个参数是调用mutations里面方法名,第二个参数是要保存的值
store.abc = item; //store.abc就是获取到我们之前定义数据里面的abc,然后赋值给它
},
abd:function(store,data){
store.abd = data;
}
}
//异步
const actions={
}
const getters={
Setabc: state => state.abc, //Setabc是获取刚才abc数据的方法
Setabd: state => state.abd
}
/*将store导出*/
export default {
state,
mutations,
getters,
actions
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
3、接下来在main.js引入store
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/index' //这个是引入的路径
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //实例化store
template: '<App/>',
components: { App }
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
4、大功告成,可以用了,在页面上使用了,谢谢大家