欢迎!从2017年开始,将慢慢的不在xmind上写总结了,全部转到博客中!这里将不再随便写写,将继承在xmind的精神,继续前行!!!

B VUE系列 三:vuex,vue全局变量管理和状态更新的利器

vuex是官方提供的管理全局变量的工具,主要是为了组件之间的交流,同时把组件的耦合性降到最低,只要根据官方的格式来写就可以了

1、安装

npm install vuex -S

2、配置

然后在 main.js 中引入

import store from './vuex/store'

3,核心仓库 store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 这里定义初始值
let state = {
  name:"",
  
};

const mutations = {
   setName(context,msg){
     context.custid = msg;
   },
  
};

// 事件触发后的逻辑操作
// 参数为事件函数
const actions = {

};

// 返回改变后的数值
const getters = {

};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

4、读取store中的值

computed: {
      author () {
        return this.$store.state.name
      }
    }

5、改变值,官方推荐方法

this.$store.commit('setName',"Jack");
//setName要和store中mutations 里面的方法名对应

以上就是基本 简单的用法:

复杂的用法 参考 官网的 购物车案例。对于大项目~~有 区分模块的概念 等  后续补充!!

 

3333

posted @ 2018-05-11 15:36  拐进web的奋斗者  阅读(1914)  评论(0编辑  收藏  举报