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
}
}
网友评论