1.actions解決異步：
store下index.js文件:
getters: {
? ? /* 計算大專學歷的數據 */
? ? getDaZhuan: function (state) {
? ? ? return state.list.filter(r => r.xueli == '大專')
? ? },
? ? /* 計算本科學歷的數據 */
? ? getBengKe: function (state) {
? ? ? return state.list.filter(r => r.xueli == '本科')
? ? },
? ? /* 說明也具有緩存功能 如果state中的數據得到了改變
? ? ? ? 那么getters中的屬性也會發生改變,如果state的值沒有發生任何變化,那么getters
? ? ? ? 中的屬性的值就不會發生改變*/
? ? getRandom:function(state){
? ? ? ?return state.num +'--'+ Math.random()
? ? }
? },
? /* 在mutations中修改state中的值(修改state中的值要想留下記錄必須用mutations修改) */
? mutations: {
? ? /* 在mutations里面寫異步就會造成數據混亂的問題 */
? ? /* mutations 的方法最好大寫,為了和actions方法做區分 */
? ? /* mutations 通過payload來獲取 */
? ? ADDNUM: function (state, payload) {
? ? ? console.log('ADDNUM', state);
? ? ? /* 模擬后臺獲取數組的異步場景 */
? ? ? /* setTimeout(()=>{
? ? ? ? state.num+=payload
? ? ? },500) */
? ? ? /* state.num++ */
? ? ? state.num += payload
? ? },
? ? DELNUM: function (state, payload) {
? ? ? console.log('DELDNUM', state);
? ? ? /* state.num-- */
? ? ? state.num -= payload
? ? },
? },
? /* actions是用來調后臺接口的并commit提交一個mutations */
? actions: {
? ? /* actions里面的方法小寫為了區分mutations里面的方法 */
? ? /* 異步請求要放 actions 里面去寫 不要放組件寫*/
? ? addajax: function ({
? ? ? commit
? ? }, data) {
? ? ? setTimeout(() => {
? ? ? ? /* 使用解構出來的commit方法來提交一個mutations方法ADDNUM來修改state中的值 */
? ? ? ? commit('ADDNUM', data)
? ? ? }, 500)
? ? },
? ? delajax: function ({
? ? ? commit
? ? }, data) {
? ? ? setTimeout(() => {
? ? ? ? /* 使用解構出來的commit方法來提交一個mutations方法ADDNUM來修改state中的值 */
? ? ? ? commit('DELNUM', data)
? ? ? }, 500)
? ? },
? },
? /* 可以使用modules把vuex分模塊 */
? modules: {}
App.vue:
<p>
? ? ? 選擇要加減的數量
? ? ? <!-- v-model.number可以把字符串類型轉成數字類型 -->
? ? ?<select v-model="shuzi">
? ? ? ?<!-- 使用v-bind也會解析成數字 -->
? ? ? <option :value="1">1</option>
? ? ? <option :value="2">2</option>
? ? ? <option :value="3">3</option>
? ? </select>
? ? </p>
? ? <button @click="add">增加</button> |
? ? <button @click="del">減少</button>
data(){
? ?return{
? ? ?shuzi:1,
? ? ?xueli:'大專',
? ? ?value:0,
? ? ?arr:this.$store.state.list
? ?}
? },
methods:{
? ? /* 通過vuex方法實現了不同組件之間的數據共享 */
? ? add(){
? ? ? /* 利用commit傳值給mutations */
? ? /* this.$store.commit('ADDNUM',this.shuzi) */
? ? /* 需要dispatch一個actions方法 */
? ? this.$store.dispatch('addajax',this.shuzi)
? ? },
? ? del(){
? ? /* this.$store.commit('DELNUM',this.shuzi) */
? ? this.$store.dispatch('delajax',this.shuzi)
? ? },
? ? getR(){
? ? ? console.log(this.$store.getters.getRandom);
? ? },
}
},
2.getters分類展示:
store下index.js文件：
export default new Vuex.Store({
? /* state是用來存儲組件中的數據的 */
? state: {
? ? msg: '我是組件共享的數據',
? ? num: 0,
? ? list: [{
? ? ? ? "title": "某xxxx去了學校1",
? ? ? ? "dec": "xxxxxxx學習了vue學習了java",
? ? ? ? "xueli": "大專"
? ? ? },
? ? ? {
? ? ? ? "title": "某xxxx去了學校2",
? ? ? ? "dec": "xxxxxxx學習了vue學習了javaScript",
? ? ? ? "xueli": "大專"
? ? ? },
? ? ? {
? ? ? ? "title": "某xxxx去了學校3",
? ? ? ? "dec": "xxxxxxx學習了vue學習了云計算",
? ? ? ? "xueli": "大專"
? ? ? },
? ? ? {
? ? ? ? "title": "某xxxx去了學校4",
? ? ? ? "dec": "xxxxxxx學習了vue學習了前端",
? ? ? ? "xueli": "本科"
? ? ? },
? ? ? {
? ? ? ? "title": "某xxxx去了學校5",
? ? ? ? "dec": "xxxxxxx學習了vue學習了后端",
? ? ? ? "xueli": "本科"
? ? ? },
? ? ? {
? ? ? ? "title": "某xxxx去了學校6",
? ? ? ? "dec": "xxxxxxx學習了vue學習了大數據",
? ? ? ? "xueli": "本科"
? ? ? }
? ? ]
? },
? /* getters計算組件中的數據的,可以對數據進行二次加工類似于computer功能 */
? /* 類似于計算屬性 */
? getters: {
? ? /* 計算大專學歷的數據 */
? ? getDaZhuan: function (state) {
? ? ? return state.list.filter(r => r.xueli == '大專')
? ? },
? ? /* 計算本科學歷的數據 */
? ? getBengKe: function (state) {
? ? ? return state.list.filter(r => r.xueli == '本科')
? ? },
? ? /* 說明也具有緩存功能 如果state中的數據得到了改變
? ? ? ? 那么getters中的屬性也會發生改變,如果state的值沒有發生任何變化,那么getters
? ? ? ? 中的屬性的值就不會發生改變*/
? ? getRandom:function(state){
? ? ? ?return state.num +'--'+ Math.random()
? ? }
? },
App.vue:
<p>
? ? ? 選擇要展示的學歷
? ? ? ?<select v-model="value" @change="changefn">
? ? ? ? ?<option value="0">全部</option>
? ? ? <option value="1">大專</option>
? ? ? <option value="2">本科</option>
? ? </select>
? ?</p>
? ? <table border="2">
? ? ? <tr>
? ? ? ? <th>標題</th>
? ? ? ? <th>描述</th>
? ? ? ? <th>學歷</th>
? ? ? </tr>
? ? ? <tr v-for="(v,i) in list" :key="i">
? ? ? ?<td>{{v.title}}</td>
? ? ? ?<td>{{v.dec}}</td>
? ? ? ?<td>{{v.xueli}}</td>
? ? ? </tr>
? ? </table>
第一種方法展示：
computed:{
? ?list:function(){
? ? ?/* value==0 展示全部 */
? ? ?if(this.value==0){
? ? ?return this.$store.state.list
? ? ?}else if(this.value==1){
? ? ? ?/* value 為1的通過getters的過濾展示大專數據 */
? ? ? return this.$store.getters.getDaZhuan
? ? ?}else if(this.value==2){
? ? ? ?return this.$store.getters.getBengKe ?
? ? ?}else{
? ? ? ?/* 計算屬性無論如何都需要返回一個值 */
? ? ? ?return []
? ? ?}
? ?},
第二種方法展示：
methods:{
? ? changefn(){
? ? ? if(this.value==0){
? ? ? ? this.arr = this.$store.state.list
? ? ? }else if(this.value==1){
? ? ? ? /* value為1通過getters的過濾展示大專數據 */
? ? ? ? this.arr = this.$store.getters.getDaZhuan
? ? ? }else if(this.value==2){
? ? ? ? this.arr = this.$store.getters.getBenke
? ? ? }
? ? }
?}
3.mapState和mapGetters：
import
導出vuex中的mapState方法
/* import {mapState} from 'vuex' */
/* import {mapState,mapGetters} from 'vuex' */
computed? 計算屬性里
computed:{
? /* 等同于 list:function (){return[...]} */
? ?/* ...mapState(['list']),
? ?...mapGetters(['getDaZhuan','getBengke']) */
? },
