vuex的Store簡單使用過程

介紹

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裏面的狀態值是怎麼樣的就是怎麼樣的？