這篇文章主要為大家展示了vuex怎么快速上手，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。
成都創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對(duì)營(yíng)銷、技術(shù)、服務(wù)都有自己獨(dú)特見解，公司采取“創(chuàng)意+綜合+營(yíng)銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時(shí)，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來(lái)將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級(jí)，滿足企業(yè)一站式全網(wǎng)整合營(yíng)銷推廣需求，讓再小的品牌網(wǎng)站建設(shè)也能產(chǎn)生價(jià)值！
引入
重慶分公司
重慶分公司
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {...},
mutations: {...},
actions: {...}
})
export default store
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
store,...
})
...
//test.vue 使用時(shí)：
import {mapState,mapMutations} from 'vuex'State篇
state更新實(shí)時(shí)渲染是基于==computed==這個(gè)計(jì)算屬性的,直接賦給data只能賦值初始值，不會(huì)隨著state改變實(shí)時(shí)渲染
export default {
data() {
return {
name:this.$store.state.name,
};
},
}{{name}}export default { computed: { name() { return this.$store.state.name; } }, }
注意： data中的變量如果和computed中的變量重名,data優(yōu)先，注意命名
獲取多個(gè)state值，寫多個(gè)函數(shù)return,很繁瑣，所以有==mapState==輔助函數(shù)
export default {
computed: {
token(){
return this.$store.state.token;
}，
name(){
return this.$store.state.name;
}
},
}
import { mapState } from 'vuex'
export default {
computed: mapState([
'token'，
'name'
])
}我們有局部計(jì)算，怎么和mapState一起用？
import { mapState } from 'vuex'
export default {
computed:{
getTime(){
return 123;
},
...mapState([
'token'，
'name'
])
}
}我們?yōu)樗饌€(gè)別名
xiaokeai,dahuilang是我們?nèi)〉膭e名 token,name是state的值 {{xiaokeai}}
我們要state和data發(fā)生點(diǎn)什么
假如token的值123; balabala的值就是 123皮卡皮 {{balabala}}
取個(gè)對(duì)象值怎么破？
{{daSon}} {{xiaoSon}}
這種方式取對(duì)象寫到業(yè)務(wù)里不直觀,也不共用,下節(jié)==Getter==有更優(yōu)的方案
Getter篇
Getter是針對(duì)state的【對(duì)象】值提前做一些處理，以便用的時(shí)候直接提取
可以 this.$store.getters.xxx 使用,也可以使用mapGetters輔助函數(shù)，==輔助函數(shù)注意：== 和state一樣，注入在computed中
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
obj: {
yeye: {
baba: {
daSon: "老大",
xiaoSon: "老二"
}
}
}
},
getters: {
getson: state => {
return state.obj.yeye.baba;
}
}
})
export default store
{{getson}}
Mutation篇
操作： this.$store.commit("名字","值");
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: "vuex的token",
},
mutations: {
setToken(state, val) {
state.token = val;
}
}
})
export default storemapMutations 輔助函數(shù)，和state一樣，可以別名， ==注意：== 輔助函數(shù)注入在methods中
methods: {
...mapMutations([
'setToken'
])
}
this.setToken(100); //token修改為100Mutation 必須是同步函數(shù)，不要誤解這句話，以為異步不能用，異步可以用在里面，視圖的渲染，取值都沒(méi)有問(wèn)題，問(wèn)題在于：調(diào)試的時(shí)候，一些瀏覽器調(diào)試插件不能正確監(jiān)聽state。所以方便調(diào)試，盡量將異步寫入action中
Action篇
注意action的 參數(shù)不是 state ,而是context，context里面包含commit,state?；静僮鳎簍his.$store.dispatch("函數(shù)名","值")
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions([
"increment"
])
}
}
this.increment(123);module篇
module 目的將store按功能拆分成多個(gè)文件，利于維護(hù)管理，module 分為2種情況，1.是有命名空間， 2.是沒(méi)有命名空間
沒(méi)有命名空間： action、mutation 和 getter 是注冊(cè)在全局的，所以要注意，方法函數(shù)不要設(shè)置同名了，如果同名了會(huì)都執(zhí)行。
stete例外是局部。
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from "./modules/cat.js";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: "vuex的token",
},
modules:{
moduleA
}
})
export default store;
export default {
// namespaced: true,
state: {
cat:"我是cat",
},
mutations: {
setCat(state, val) {
state.cat = val;
}
},
actions: {
},
getters: {
}
};無(wú)命名空間 取值
this.$store.state.moduleA.cat
或者
...mapState({
cat:state=>state.moduleA.cat,
}),
不可以(state是局部，不可以這么取)：
...mapState([
"cat"
]),無(wú)命名空間 改變值
和原來(lái)一樣，因?yàn)榉椒ㄊ亲?cè)在全局的
this.$store.commit("setCat",666);
或者
...mapMutations([
"setCat"
])有命名空間： state, action、mutation 和 getter 是局部的，模塊間命名互相不沖突，可以重名。
namespaced 設(shè)置為true,即可開啟
export default {
namespaced: true,
state: {
cat:"我是cat",
}
}有命名空間取值
this.$store.state.moduleA.cat
或者
...mapState("moduleA",[
"cat"
])有命名空間 改變值
...mapMutations("moduleA",[
"setCat"
])
this.setCat(888);
或者：
this.$store.commit("moduleA/setCat",666);最后 plugins
vuex頁(yè)面刷新會(huì)丟失數(shù)據(jù)，用vuex-persistedstate插件可解決
import createPersistedState from "vuex-persistedstate";
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {},
modules:{},
plugins: [
createPersistedState({
storage: window.sessionStorage
})
]
})
export default store以上就是關(guān)于vuex怎么快速上手的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。
