Vuex介绍:
Vuex官网:http://vuex.vuejs.org/
Vuex是实现数据状态管理的技术,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex适用场景:适用大型复杂的vue项目。
Vuex使用:
第一步:安装vuex命令:npm install vuex --save
第二步:在src目录下创建一个store目录,并在其中创建index.js文件
添加如下代码:
import Vue from 'vue'
import VueX from 'vuex'
import state from './state'
Vue.use(VueX)
export default new VueX.Store({
state,
mutations
})
第三步:在store目录下创建state.js文件
添加如下代码:
export default {
//userinfo为模拟数据
userinfo:{
name:"1504",
email:"1504@126.com",
company:"百度",
address:"北京海淀"
}
}
第四步:在入口文件main.js引入store
//引入store
import store from './store'
new Vue({
......
store
})
第五步:在各组件中如何使用vuex
通过在computed计算属性中访问this.$store.state.数据
例如:
//渲染vuex里面的数据
computed:{
info(){
return this.$store.state.userinfo
}
}
Vuex修改数据:
1、比较简单的方式:
view组件提交mutations通过commit传值
例如:this.$store.commit('MODIFY',name)
mutations对象接收数据方式
例如:
const mutations={
MODIFY(state, value) {
state.userinfo.name= value
}
}
2、比较官方的方式:
view->actions->mutations->state->view
view通过dispatch提交到actions,actions通过commit提交到mutations,并最终修改state中的数据,来达到视图更新。为了简化vuex相关方法,让你少敲几个字母,提高开发体验
view组件提交通过dispatch发送到actions
例如:this.$store.dispatch('go',name)
actions对象接收数据方式:
例如:
const actions={
go({commit,state},value){
//actions通过commit提交到mutations
commit(“MODIFY”,value)
}
}
const mutations={
MODIFY(state, value) {
state.userinfo.name= value
}
}