基于vue-cli的vue项目之vuex的使用(commit参数)

1.安装 npm install vuex 

2.在src目录下新建一个store目录,然后在store目录下新建一个js,在js里面引用一下vuex,代码如下:

import Vue from 'vue';  

import Vuex from 'vuex';  

Vue.use(Vuex);  

export default store = new Vuex.Store({  //注意:这里的store的s必须大写

state:{

这里写一些申明的数据之类的,例如:

list: [

{id:1,name:'鱼香肉丝',price:12,count:0,gw:true},

{id:2,name:'鱼香肉丝',price:12,count:0,gw:true},

{id:3,name:'鱼香肉丝',price:12,count:0,gw:true},

{id:4,name:'鱼香肉丝',price:12,count:0,gw:true}

],

},

mutations:{

这里写一些方法,例如:

push (state, index) {

state.list[index].count++

state.list[index].gw =false

  state.list1.push(state.list[index])

},

}

})

3.在.main.js使用vuex并关联store

import Vue from 'vue'  

import App from './App'  

import router from './router'  

import store from './vuex/store';  //使用store

Vue.config.productionTip = false;  

new Vue({  

    el: '#app',  

    router,  

    store,  //关联store

template: '',  

    components: {  

        App  

    },  

})  

4.在组件中使用vuex,并调用vuex/store.js的方法,例如:

 export default {  

        name: 'app',  

        computed: {

       // 数据

         list () {

            return this.$store.state.list

       }

}

        methods: {  

         push (index) {

           this.$store.commit('push', index)

          },

        }

    }  

这是我本人的理解,希望可以给你们一些帮助,vuex里面还有很多方法,可以到官网去进一步的了解与学习。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,972评论 0 7
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,477评论 0 7
  • 简悦直播教练恬源阅读 253评论 0 4
  • 老林业工人 默默耕耘不表功,银锄飞舞绣山峰。 当年播绿英雄汉,今日传薪白发翁。 茶话不离鼙鼓壮,人生难得夕阳红。 ...
    嵫景玩童阅读 244评论 0 0
  • ——她坐在咖啡馆里对我说,你知道吗,我以前也遇到过一个很喜欢的人。 我叫南西,我有个朋友叫北东,我们凑在一起整四个...
    南西先生阅读 940评论 5 9