uni-app中使用vuex

項目中難免都會用到vuex，下面我總結了一下在uni-app中如何使用vuex

• 首先新建文件store/index.js

import Vue from "vue"
import  Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
      // 全局屬性變量
      state:{ // state的作用是定義屬性變量。定義一個參數
        num:0,
	price:10,
	name:"蘋果",
	testList:[]
      },
})

• 注：新建的store文件要main.js注冊哦

import store from "./store/index.js"
Vue.prototype.$store=store;

1、首先是mutations的使用方式

//store/index.js文件中
export default new Vuex.Store({
      // 全局屬性變量
      state:{ // state的作用是定義屬性變量。定義一個參數
        num:0,
	price:10,
	name:"蘋果",
	testList:[]
      },
      // 全局同步方法，在methods{this.$store.commit("add")}
      mutations:{
	add(state){
	  state.num++;
	},
	down(state){
	  state.num--;
	},
      },
})


//頁面調用 text/index.vue
<template>
  <view>
        <view>vuex測試</view>
        <view>數量：{{num}}</view>
	<button type="default" @click="add">加一</button>
	<button type="default" @click="down">減一</button>
  </vuew>
</template>
// 頁面js方法
computed:{
  // 數量
  num(){  //計算數據，視圖隨之改變（直接返回num，在頁面顯示）
    return this.$store.state.num;
  },
},
methods: {
  add(){  // mutations的調用方式，通過commit調用
    this.$store.commit("add")  // 直接計算，數據會變化，視圖不會更新 ，需要計算屬性監聽
  },
  down(){
    this.$store.commit("down")  // 直接計算，數據會變化，視圖不會更新
  },
}

總結：mutations是一個全局的同步方法，可修改定義在vuex屬性的值，在所有頁面都可調用，所以有時候在vue中兄弟通訊除了使用事件總線，還可使用vuex的形式，在mutations定義的是數據應該怎樣變化。在頁面中的調用是通過在方法（methods）中使用this.$store.commit("定義的方法名")，需要注意的是這里的調用用的是commit（actions中使用的是dispatch，兩者調用的不同點），如果想使用改變后的值的話，可以在computed中返回的形式使用，如：return this.$store.state.num;
2、計算屬性的應用getters

// store/index.js中
//store/index.js文件中
export default new Vuex.Store({
      // 全局屬性變量
      state:{ // state的作用是定義屬性變量。定義一個參數
        num:0,
	price:10,
	name:"蘋果",
	testList:[]
      },
      // 全局同步方法，在methods{this.$store.commit("add")}
      mutations:{
	add(state){
	  state.num++;
	},
	down(state){
	  state.num--;
	},
      },
      // vuex屬性計算,在視圖里面當變量使用
      getters:{
	conut(state){
	  // 這個函數的執行依賴一個可變的變量
	  return state.num*state.price //數據變化返回出新的值
        }
      },
})


//頁面調用 text/index.vue
<template>
  <view>
        <view>vuex測試</view>
        <view>數量：{{num}}</view>
        <view>商品名：{{name}}</view>
        <view>總價：{{conut}}</view>
	<button type="default" @click="add">加一</button>
	<button type="default" @click="down">減一</button>
  </vuew>
</template>
// 頁面js方法
computed:{
  // 數量
  num(){  //計算數據，視圖隨之改變（直接返回num，在頁面顯示）
    return this.$store.state.num;
  },
  // 價格
  conut(){  // 僅在這里調用即可
     return this.$store.getters.conut;
  },
},
methods: {
  add(){
    this.$store.commit("add")  // 直接計算，數據會變化，視圖不會更新 ，需要計算屬性監聽
  },
  down(){
    this.$store.commit("down")  // 直接計算，數據會變化，視圖不會更新
  },
}

總結：getters是一個計算屬性，可以計算vuex內的數據，調用方式是在頁面的computed中通過this.$store.getters.conut;（conut為定義的方法名）可直接返回，返回出的函數名可只用用於頁面顯示
3、actions異步請求的使用

// store/index.js中
//store/index.js文件中
export default new Vuex.Store({
      // 全局屬性變量
      state:{ // state的作用是定義屬性變量。定義一個參數
        num:0,
	price:10,
	name:"蘋果",
	testList:[]
      },
      /*
      // 全局同步方法，在methods{this.$store.commit("add")}
      mutations:{
	add(state){
	  state.num++;
	},
	down(state){
	  state.num--;
	},
      },
      // vuex屬性計算,在視圖里面當變量使用
      getters:{
	conut(state){
	  // 這個函數的執行依賴一個可變的變量
	  return state.num*state.price //數據變化返回出新的值
        }
      },
      */
      actions:{
        testActions(context){
          // context包含了state,mutations，getters
          // console.log(context)
          // 執行異步參數，通用ajax
          setTimeout(()=>{  // 模擬異步請求
            context.state.testList=["豬豬俠","超人強","小飛飛","豬博士","喜羊羊"]
          },2000)
        }
      }
})


//頁面調用 text/index.vue
<template>
  <view>
        <view>vuex測試</view>
        <view>數量：{{num}}</view>
        <view>商品名：{{name}}</view>
        <view>總價：{{conut}}</view>
	<button type="default" @click="add">加一</button>
	<button type="default" @click="down">減一</button>
        <button type="default" @click="testActions">testActions</button>
  </vuew>
</template>
// 頁面js方法
computed:{
  // 數量
  num(){  //計算數據，視圖隨之改變（直接返回num，在頁面顯示）
    return this.$store.state.num;
  },
  // 價格
  conut(){  // 僅在這里調用即可
     return this.$store.getters.conut;
  },
  // 計算vuex中actions
  testList(){
    console.log(this.$store.state.testList) // 會打印得到異步請求的參數
    return this.$store.state.testList;    // 返回可直接使用，如遍歷數據
  }
},
methods: {
  add(){
    this.$store.commit("add")  // 直接計算，數據會變化，視圖不會更新 ，需要計算屬性監聽
  },
  down(){
    this.$store.commit("down")  // 直接計算，數據會變化，視圖不會更新
  },
  // vuex中調用actions方法
  testActions(){   // 點擊按鈕執行函數，觸發actions里面的方法，在computed計算屬性中可獲得這個值
    this.$store.dispatch("testActions") // 觸發actions里面的方法
  }
}

總結：actions是vuex中異步請求的方法，一般用在公共請求數據接口的地方，調用方式是this.$store.dispatch("方法名")（注：這里是dispatch，與mutations中使用的commit的方式不同，）