码迷,mamicode.com
首页 > 其他好文 > 详细

vue学习之vuex

时间:2019-04-23 12:50:05      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:compute   pst   ann   iss   使用   ati   cart   getter   comm   

1  首先还是安装 npm install vuex --save、

2 在src这种创建目录为store 创建 index.js  (getters.js ,actions.js ,mutations.js ,state.js)这些是store里面的属性 看情况 一般分这几个文件写,也可以合并写在 index.js ,没有index.js就写在store.js中 ,在index.中引入 (getters.js ,actions.js ,mutations.js ,state.js)这些文件。

  而在这些文件中要使用export default {} 把数据包起来暴露出去 另外在index.js/或者store.js中也要引入

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export default new Vuex.Store({
state, // 状态对象
mutations, // 包含多个更新state函数对象
actions, // 包含多个对应事件回调函数对象
getters // 包含多个getter计算函数的对象
})

3 调用方法 或者 是调用数据 

      有两种方法 : 

      3.1. this.$store.dispatch(‘jianNum‘, { goods: this.good })   dispatch有两个参数 

      第一个参数是方法名  它会去actions中找与之对应的方法名(必填)  例如   this.$store.dispatch(‘jianNum‘, { goods: this.good }) 它会去actions中找与之对应的方法名jianNum的方法 

      第二个参数是 传递过去的参数  以对象的形式传递(非必须)

      3.2 在组件中引入 如:import { mapState, mapActions, mapGetters } from ‘vuex‘   需要什么引入什么   然后再computed属性中写 

      ...mapState([‘cartgoods‘, ‘addclass‘]),  cartgoods是对应 state中的状态对象 一次类推 下同
      ...mapGetters([‘isshow‘, ‘allmoney‘, ‘allgoodsnum‘])
      在method中写
.     ..mapActions([‘clearall‘])  clearall 为 actions中的方法       这种调用格式为([‘   ‘]) 
     如下图技术图片

 

4 vuex执行图
技术图片

 5.  小弟才疏学浅 如有错误,谢谢指正

 

 

vue学习之vuex

标签:compute   pst   ann   iss   使用   ati   cart   getter   comm   

原文地址:https://www.cnblogs.com/xy1996/p/10755487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!