一。什么是VueX锣枝，VueX是什么?
VueX是一個(gè)用來(lái)管理組件之間通訊的插件，他就是專(zhuān)門(mén)為vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式，他解決了組件之間同一狀態(tài)的共享問(wèn)題他能更好的在組件外部管理狀態(tài)
二零远。安裝vueX
1、使用npm安裝vuex
npm install vuex--save
2厌蔽、使用import引入vuex
import Vuex from ‘vuex’
3牵辣、使用Vue的插件引入函數(shù)Vue.use()使用Vuex
Vue.use(Vuex)
4、創(chuàng)建好的vuex不能直接使用奴饮，我們要去main.js(全局)中配置
import store from './store/index'
new Vue({
el: '#app',
router,
store纬向，他要和import引入的名字一樣
components: { App },
template: '<App/>'
})
三。主要包括以下幾個(gè)模塊
state mutations getters modules actions
state：是vuex的基本數(shù)據(jù)拐云，用來(lái)存儲(chǔ)變量 （后四個(gè)屬性都是用來(lái)操作stater里面存儲(chǔ)變量的）
state:{ //聲名數(shù)據(jù)
shopCar:[],
num:'',
},
使用時(shí)：
this.$store.state.屬性名
mutation：是提交數(shù)據(jù)的方法罢猪，可以直接操作state它是同步的（異步的得使用action）
state:{ //聲名數(shù)據(jù)
shopCar:[],
num:'',
},
mutations:{//修改數(shù)據(jù)方法 同步代碼
updateShopCar(state,val){
state.shopCar.push(val)
}
},
getters:類(lèi)似于計(jì)算屬性，可以根據(jù)state中的數(shù)據(jù)變化 計(jì)算出新的值
getters:{ //類(lèi)似于 state 的計(jì)算屬性 可以根據(jù)state中的數(shù)據(jù)變化 計(jì)算出新的值
regetShopCarLen(state){
var sum=0
for(var i=0;i<state.shopCar.length;i++){
sum+=state.shopCar[i].length
}
return sum
}
},
使用時(shí)：
$store.getter.方法名
modules:它允許我們將 store 分割成模塊 叉瘩，讓每個(gè)模塊都有自己的 state膳帕、mutation、action薇缅、getter
modules:{
user, 創(chuàng)建一個(gè)user.js 然后引入user.js 在然后就可以去user.js里面進(jìn)行操作了
},
我們要引入模塊
import user from './user.js'
然后在模塊里
export default {
state: {},
mutations: {},
actions: {},
getter:{}
}
使用時(shí)：
this.$store.state.user危彩。一個(gè)變量名
actions 和mutations的使用方法相同 （但是它是執(zhí)行異步代碼）
state: {
key:"",
},
mutations: {
updakeKey(state, val) {
state.key = val
console.log(state.key);
}},
actions: {
updakeKey(state, val) {
setTimeout(() => {
state.commit('updakeKey', val)
},10);
}
}
使用時(shí)：
this.$store.dispatch('updakeKey',10) //updakeKey:方法名 10 就是值
接收
this.$store.state.key
plugins:是插件 它的作用就是長(zhǎng)久存儲(chǔ) （得下載插件）
npm install vuex-localstorage 或者 npm install vuex-localstorage 下載
然后就是引入 vuex-localstorage 和使用 vuex-localstorage
import createPersist from 'vuex-localstorage'
plugins:[//插件 長(zhǎng)久儲(chǔ)存
createPersist({namespace:'namespace-for-state',})
],
