vuex的安裝

npm install vuex --save或cnpm install vuex --save

main.js引入vuex

import Vue from 'vue' import Vuex from 'vuex' import store from './vuex/store'Vue.use(Vuex)

vuex的目錄結(jié)構(gòu)和store.js的代碼

store.js的代碼（異步和同步的代碼均留下兩個(gè)方法）

import Vue from 'vue' import Vuex from 'vuex' import GLOBAL_CONFIG from '../config/config' import axios from 'axios' import BScroll from 'better-scroll' // import BScroll from '../assets/js/iscroll'Vue.use(Vuex)const menu = {state: {mannumber:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,'其它'],activeindex: null,nowindex:null,products: {},GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG']},mutations: {get_product: function (state, products) {state.products = products;for(let i = 0; i < state.products.length; i++){if(state.products[i]['image'] != false && state.products[i]['image'].indexOf(state.GLOBAL_CONFIG['dataImage']) === -1){state.products[i]['image'] = state.GLOBAL_CONFIG['base64Header'] + state.products[i]['image'];}else{state.products[i]['image'] = require("../assets/file.png");}}}},actions: {} }export default new Vuex.Store({state: {mastdisplay: false,supervisory_control:false,product: {},countNumber:{},orderdetail:{},GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] },mutations: {mastdisplay: function (state,name) {if(typeof name !== 'string'){ if(name['name'] == 'mastdisplay' || name['name'] == 'mastspecificat' || name['name'] == 'mastflavour'){if(name['product'].hasOwnProperty('specs')){for(let i = 0; i < name['product']['specs'].length; i++){name['product']['specs'][i]['number'] = 0;}} state.product = name['product'];if(name['name'] === 'mastspecificat'){let specificatscroll = new BScroll('.mast-scrollspecificat',{scrollY: true,click: true});}if(name['name'] === 'mastflavour'){let flavouringscroll = new BScroll('.mast-flavouringscroll',{scrollY: true,click: true});} }name = name['name']; }if(state[name]){state[name] = false;}else{state[name] = true;}},countNumber: function (state,countNumber) {state.countNumber = countNumber;},get_orderdetail: function (state,response) {state.orderdetail = response;console.dir(state.orderdetail);},hidden_customcount: function (state) { if(state.mastload){state.mastload = false;}}},components:{},modules: {menu:menu},actions: {get_orderdetail: function (context,company,name) {axios.post('/point-api-order_detail',{tableid:company['tableid'],companyid:company['companyid']}).then(function(response){ context.commit('get_orderdetail',response);}, function(response){mui.toast('網(wǎng)絡(luò)錯(cuò)誤');});},check_cart: function (context,product) {axios.post('/point-api-checkcart',{user_id:product['user_id'],url:context.state.GLOBAL_CONFIG['WECHAT_API_HOST']+"/wechat/app/index.php?i="+localStorage.i+"&c=entry&do=ShopCart&m=wei_scan_code"}).then(function(response){ if(response.hasOwnProperty('error')){mui.toast(response['erron']);return false;}else{context.commit('set_cart',response);// let menuscroll = new BScroll('.mast-cart-content-parent',{// scrollY: true,// click: true// });} }, function(response){mui.toast('網(wǎng)絡(luò)錯(cuò)誤');});} })

mutations的使用，可以在mutations里面定義方法，里面的方法為同步操作，方法里的第一個(gè)參數(shù)是state對(duì)象，可操作state對(duì)象里定義的屬性，第二個(gè)參數(shù)為傳進(jìn)來的參數(shù)，也可不傳，在組件里可以直接操作state里的屬性，例如：

this.$store.state.mastdisplay 或通過store里的方法改變this.$store.commit('mastdisplay');

actions的使用，actions里面的方法用來處理異步操作，調(diào)用異步接口后，獲取到數(shù)據(jù)，對(duì)state里的屬性進(jìn)行重新賦值，然后在組件里計(jì)算該屬性的變化

computed: {orderdetail: function () {return this.$store.state.orderdetail;}mastdisplay: function () {return this.$store.state.mastdisplay;}products: function () {return this.$store.state.menu.products;},product: function () {return this.$store.state.product;}}

在組件里調(diào)用actions方法

this.$store.dispatch('get_orderdetail',{tableid:localStorage.tableid,companyid:localStorage.companyid});

有時(shí)候我們可能會(huì)把一個(gè)組件分為一個(gè)模塊，例如上面的代碼，我定義了一個(gè)menu的模塊，那么我需要在modules里面引入這個(gè)模塊，在組件里操作該模塊的屬性如下：

this.$store.state.menu.products

調(diào)用該模塊的mutations里的方法不需要加上menu.

關(guān)于vuex還有很多的東西沒用過，大家可以自己去玩下，最好把官網(wǎng)看多幾遍，后來再去看的時(shí)候，受益良多。

總結(jié)

以上是生活随笔為你收集整理的vuex从安装到使用的教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。