技術標籤：Vue.js

在Vue專案中安裝Vuex

npm install vuex --save

在src目錄下新建個store資料夾，裡面新建index.js
在index.js資料夾中建立Vuex例項

原始碼

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: "馬鞍山",
    count: 1
  },
  getters: {
    divide: (state) =>
 
 {
      return 4 / 2;
    }
  },
  mutations: {
    increment(state, num) {
      state.count = num
    }
  },
  actions: {

  },
  modules: {}
})

main.js中引入該檔案

import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

元件中通過 this.$store.state來獲取我們定義的資料；

<div>
    {{this.$store.state.count}}
</
 
div>

改變store.state的值

mounted() {
    let i = 1;
    setInterval(() => {
      this.$store.commit("increment", i++);
    }, 1000);
  },
  computed: {
    count() {
      return this.$store.state.count;
    },
  },

使用Getters

<h2>{{this.$store.getters.divide}}</h2>

使用Mutations

    this.$store.commit("increment", 10);

使用Action

import Vue from 'vue'
import Vuex from 'vuex'

//使用Vuex
Vue.use(Vuex);

//建立Vuex例項
const store = new Vuex.Store({
  state: {
    count: 100
  },
  getters: {
    divide: (state) => { //上面定義的state物件
      return state.count / 2;
    }
  },
  mutations:{
      add(state){ //上面定義的state物件
        state.count = state.count + 1;
      },
      reduction(state){
        state.count = state.count - 1;
      }
  },
  actions:{
      addNum(context){ //接收一個與store例項具有相同方法屬性的context物件
        context.commit("add"); //mutatuions裡的方法名
      },
      reductionNum(context){
          context.commit("reduction");
      }
  }
})

export default store //匯出store

在元件中接收

  methods: {
    addcount() {
      var n=20;
      //this.$store.commit("addNum");
       this.$store.dispatch("addNum",n);
    },
    reductioncount() {
      //this.$store.commit("reductionNum");
      this.$store.dispatch("reductionNum");
    }
  }