vue狀態管理（vuex）

vuex，官方定義為狀態管理，其實這個狀態管理，和H5本地緩存的作用很相似，通俗的講，就是存儲一些公用的東西，提供給各個組件使用，和服務器端的session功能也很類似。

不同的是，vuex在刷新頁面的時候，會自動還原到初始的狀態，話不多說，我們直接上干貨：

1.安裝vuex:npm install vuex --save

2.需要在man.js中引用如下代碼

import Vue from 'vue'
import App from './App'
import router from './router'
import vuex from 'vuex'
Vue.config.productionTip = false
Vue.use(vuex)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

3.在根目錄下新建vuex文件加，新建文件store.js,在js文件中，寫如下代碼：

import vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const state={
    count:1
}

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

export default new Vuex.Store({
    state,mutations
})

說明：count:1是一個狀態管理的屬性，這里你可以設置自己的屬性，例如：loginstate:object

const mutations是一個固定的寫法，這里的作用是修改state中的屬性，如count，里面的方法可以自己的定義.
若要傳參的話，只能傳遞一個參數，如：

 add(state){
        state.count++;
    }方法，如果要傳遞參數，只能傳遞一個參數寫成：

 add(state，parameters){
       ....
    }

4.前端調用：

4.1在頁面引用vuex,

import store from "@/vuex/store";

在選項中申明一下store

代碼如下：

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  store,
  computed: {
  
  },
  methods: {
   
  }

4.2在頁面中使用store,

方式一：

{{$store.state.count}}

方式二：

如覺得方式一的寫法不太好看，比較長，可以在computed中做如下操作：

 computed: {
    computedcount() {
      return this.$store.state.computedcount;
    }
}

這樣就可以在頁面中直接調用{{computedcount}}

方式三：

也可以引用vuex里的

mapState

引用方式如下：

import { mapState} from "vuex";

然后可以在computed中做如下操作：

 ...mapState({
      mapcount: state => state.mapcount
    }),
    ...mapState(["mapcount"]),

這兩種寫法都可以，頁面使用的時候，直接{{mapcount}}

5.修改狀態

修改狀態，需要使用commit，以上代碼中已經寫好了添加和減少的方法，可以有兩種方式進行操作：

方式一：

<button @click="$store.commit('add')">相加</button>

<button @click="$store.commit('reduce')">相減</button>

方式二：

<button @click="add()">Mutaions傳參相減</button>

方式二需要引用mapMutations,應用方式如下：

import { mapMutations } from "vuex";

然后在選項：

methods中寫如下代碼：

...mapMutations([

“add”

])

以上就是vuex的基本使用了，剩下還有一些選項，如果弄清楚了以上這些，剩下的也不是什么問題了