介紹
Store的代碼結構一般由State、Getters、Mutation、Actions這四種組成，也可以理解Store是一個容器，Store里面的狀態與單純的全局變量是不一樣的，無法直接改變store中的狀態。想要改變store中的狀態，只有一個辦法，顯示地提交mutation。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, getters:{ }, mutations: { }, actions: { } })
簡單的Store
小朋友，要是沒有安裝vue-cli，不要看這個文檔，看了也沒用，咳咳···，創建一個vue項目直截了當，找到一個合適的文件夾，在此目錄下打開終端，使用vue-cli命令行創建項目（項目名為murenziwei）
vue create murenziwei
你會被提示選取一個 preset。你可以選默認的包含了基本的 Babel + ESLint 設置的 preset，也可以選“手動選擇特性”來選取需要的特性。
按下Enter，等da我現在只需要一個能運行的vue項目就行，命令執行完成后，文件夾會自動生成一個vue項目
按照上面圖片紅色框的命令來執行
/*切換目錄*/
cd murenziwei /*啟動項目*/ npm run serve
啟動項目完畢后，打開瀏覽器，輸入從終端得到的網址
到這，我們開始安裝router、vuex。此時的項目結構如圖以下
Ctrl+C退出啟動，繼續執行vue-cli，腳手架安裝插件router和vuex開始
安裝插件router
vue add router
輸入一個大寫Y，按下Enter
安裝插件vuex
做法同上
vue add vuex
我們再重新看一下此時的項目結構，多了router.js和store.js，其它相關的文件也被修改
啟動vue項目，npm run serve，在store.js中添加一個新狀態count
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:1
},
mutations: {
},
actions: {
}
})
修改組件HelloWorld，開始使用Store里注冊的新狀態
<template>
<div class="hello">
<h1>{{ this.$store.state.count }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
瀏覽效果
往store.js里的mustations添加改變狀態值的加減功能，
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:1
},
mutations: {
addmu(state){state.count++},
lessmu(state){state.count--}
},
actions: {
}
})
回到HelloWorld組件， 添加增加和減少按鈕，用來提交store的mutation
<template>
<div class="hello">
<h1>{{ this.$store.state.count }}</h1>
<div>
<button @click="addfn()">增加</button>
<button @click="lessfn()">減少</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods:{
addfn(){
//提交名為addmu的mutations
this.$store.commit('addmu');
},
lessfn(){
//提交名為lessmu的mutations
this.$store.commit('lessmu');
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
效果如下
由於mutation必須同步執行的限制，不方便實現復雜的功能。不過，別擔心，看見了那個Actions嗎？它就不受約束！我們可以在 它內部執行異步操作
修改store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:1
},
mutations: {
addmu(state){state.count++},
lessmu(state){state.count--}
},
actions: {
addac({commit}){commit('addmu')},
lessac({commit}){commit('lessmu')}
}
})
修改HelloWorld組件，將提交mutation改為分發Action，Actions支持載荷方式和對象方式
<template>
<div class="hello">
<h1>{{ this.$store.state.count }}</h1>
<div>
<button @click="addfn()">增加</button>
<button @click="lessfn()">減少</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods:{
addfn(){
//以載荷方式分發
this.$store.dispatch('addac');
},
lessfn(){
//以對象方式分發
this.$store.dispatch({type:'lessac'});
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
效果如下
為了更直觀的感受下Store的魅力，在views文件夾中添加一個About.vue也使用store狀態
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<HelloWorld/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
跳轉About.vue或者Home.vue，store里面的狀態值是怎么樣的就是怎么樣的？
