[Vue] vuex进行组件间通讯

vue 组件之间数据传输(vuex)

初始化 store

src/main.js

import Vuex from "vuex";
Vue.use(Vuex);

new Vue({
  ...,
  store,
  ...,
});

src/store/index.js

import mutations from "./mutations";

const initStore = {
  state: {
    userBasicInfo: {},
    siteBaseInfo: {
      download: "",
      invitation: "",
      register_enable: "",
      service_qq1: "",
      service_qq2: "",
      service_wechat: "",
    },
  },
  mutations
};

export default initStore;

src/store/mutations.js

const SET_USER_BASIC_INFO = 'SET_USER_BASIC_INFO';
const SET_SITE_BASE_INFO = 'SET_SITE_BASE_INFO';

export default {
  [SET_USER_BASIC_INFO](state, payload) {
    state.userBasicInfo = payload.data;
  },
  [SET_SITE_BASE_INFO](state, payload) {
    state.siteBaseInfo = Object.assign({}, state.siteBaseInfo, payload);
  },
}

state

正常使用 state

Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中。

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    

      
    
  `
})

在子组件中使用

const Counter = {
  template: `
{{ count }}
`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState 辅助函数

按官网的案例

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数
    siteBaseInfo: state => state.siteBaseInfo,
    // 传字符串参数
    siteBaseInfo: "siteBaseInfo",
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    download_ios (state) {
      return state.siteBaseInfo.download + this.prefix
    },
    download: state => state.siteBaseInfo.download
  })
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

mapState 与局部计算属性混合使用

使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

getter 的使用

有时候我们需要从通过 state 得到一些新的状态,因为这一状态可能其他很多组件都要使用这一状态.比如余额这一参数,我们当前只有盈利和亏损额,但是很多页面都要使用余额进行显示,那么每个引入页面都要进行一次计算吗?想想就麻烦,还是只计算一次,然后直接获取这个余额值来的方便

store/getters.js

export default {
  balance: (state) => {
    return Number(state.userBasicInfo.profit) - Number(state.userBasicInfo.loss);
  },
  download: (state) => {
    return state.siteBaseInfo.download;
  }
}

mapGetters 辅助函数

辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'balance',
      'download',
      // ...
    ])
  }
}

getter 的使用

//直接使用
store.getters.download
//组件中使用
computed: {
 download () {
    return this.$store.getters.download
  }
}
//使用辅助函数
...mapGetters([
      'download',
      'balance',
])
//和mapState一起用
computed: {
  ...mapState({
    siteBaseInfo: "siteBaseInfo",
  }),
  ...mapGetters({
    download: 'download'
  })
},

Getter 也可以接受其他 getter 作为第二个参数

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

总之,getter 就是一个将一些需要进行再次计算的 state 计算好,然后将其作为 state 进行快捷的引用

mutation 使用

• 最好提前在你的 store 中初始化好所有所需属性
• 当需要在对象上添加新属性时，你应该使用 Vue.set(obj, 'newProp', 123)或以新对象替换老对象(对象展开符)
• mutation 必须是同步函数

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler),会接受 state 作为第一个参数

//设置
mutations: {
   SET_USER_BASIC_INFO(state) {
    state.userBasicInfo = {a:1,b:2};
  },
}

//使用
store.commit('SET_USER_BASIC_INFO')

提交载荷（Payload）

//设置
mutations: {
   SET_USER_BASIC_INFO(state, payload) {
    state.userBasicInfo = Object.assign({},payload);
  },
}

//使用
store.commit('SET_USER_BASIC_INFO', {
  a:1,
  b:2
})

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象

store.commit({
  type: 'SET_USER_BASIC_INFO',
  data:{
      a:1,
      b:2,
  }
})

//mutations的效果
mutations: {
  increment (state, payload) {
    state.userBasicInfo = Object.assign({},payload.data);
  }
}

使用常量替代 Mutation 事件类型

// mutation-types.js
export const SET_USER_BASIC_INFO = 'SET_USER_BASIC_INFO';

// mutations.js
import { SET_USER_BASIC_INFO } from './mutation-types';

mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SET_USER_BASIC_INFO] (state) {
      // mutate state
    }
  }

mapMutations 辅助函数

//正常
this.$store.commit('SET_USER_BASIC_INFO');

//mapMutations
import { mapMutations } from 'vuex';

export default {
    ...,
    methods:{
        ...mapMutations({
            setUserBasicInfo: 'SET_USER_BASIC_INFO' // 将 `this.setUserBasicInfo()` 映射为 `this.$store.commit('SET_USER_BASIC_INFO')`
        })
    }
}

action

用来提交一个 mutation,还可以进行异步操作

//注册
const store = new Vuex.Store({
  state,
  mutations,
  actions: {
    //解构context.commmit
    GET_HOME_INFO({commit}) {
        commit("SET_USER_BASIC_INFO");
    },
  }
})

//触发
store.dispatch('GET_HOME_INFO')
//载荷形式
store.dispatch('GET_HOME_INFO',{})
//对象形式
store.dispatch({
    type:'GET_HOME_INFO',
    data:{}
})

mapActions 辅助函数

import { mapActions } from 'vuex'

export default {
  ...
  methods: {
    ...mapActions({
      getHomeInfo: 'GET_HOME_INFO' // 将 `this.getHomeInfo()` 映射为 `this.$store.dispatch('GET_HOME_INFO')`
    })
  }
}

异步的 action

action 中的中支持的异步 ajax,setTimeout,acync/await,promise...

store.dispatch('actionA').then(() => {
  // ...
})

其他的传值还有一些方式

比如 props，seventBus，slocalStorage，sessionStorage，router 传参，cookie（不推荐，虽然就跟之前做购物车差不多的传递形式）

vue 组件之间数据传输(props 传值方式)

这个多用于父子组件之间的传值,是最基本的传值方式

父亲组件进行绑定,将数据绑定,其中 personal,personalData,imgUrl 是绑定的数据,@updata 是绑定的事件