Vue：store（變數共享）

阿新 • • 發佈：2021-11-10

在state定義共享變數

定義共享變數

/*第三步：state：儲存資料*/
const state={
     num:0
}

在元件上讀取（{{}}符號能讀到vc身上所有東西）

$store.state.num

<template>
  <div>
    <h1>共享變數：{{$store.state.num}}</h1>
  </div>
</template>

想要改變這個共享變數

使用方法進行干涉：this.$store.dispatch

 methods:{
            addnum(){
                /*修改共享變數元件要呼叫dispatch*/
                this.$store.dispatch('jia',5)
            }
        }

this.$store.dispatch：會去action找對應的方法‘jia’

Vuex內部

拿state和value操作

//該檔案用來建立vuex的store
//引入
import Vuex from 'vuex'
import vue from 'vue'
vue.use(Vuex);
//第一步響應動作action
const actions={
    /*content上下文物件:是為了commit、value是要對num操作的資料*/
    jia(content,value){
      content.commit("JIA",value)
  }
}
//第二步：mutations--操作資料
const mutations={
     //上面的執行commit時候直接來這裡找“JIA”
    //JIA直接拿原來資料和運算元改進
    JIA(state,value){
       state.num+=value
     }
}

/*第三步：state：儲存資料*/
const state={
     num:0
}
//建立並爆乳store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

素材:

元件程式碼

<template>
  <div>
  <h2>學生名字：{{sdt}}</h2>
  <h2>年齡：{{age}}</h2>
    <h1>（學生總數）共享變數：{{$store.state.num}}</h1>
    <button @click="addnum">學生數加一</button>
  </div>
</template>

<script>
    export default {
        name: "Student",
      data(){
        return {

        }
      }

      ,props:{
            sdt:{
                type:String,
                 required:true //必須的
            },
            age:Number
        },
        methods:{
            addnum(){
                /*修改共享變數元件要呼叫dispatch*/
                this.$store.dispatch('jia',1)
            }
        }





    }
</script>

<style scoped>

</style>

STORE.INDEX.JS

//該檔案用來建立vuex的store
//引入
import Vuex from 'vuex'
import vue from 'vue'
vue.use(Vuex);
//第一步響應動作action
const actions={
    /*content上下文物件:是為了commit、value是要對num操作的資料*/
    jia(content,value){
      content.commit("JIA",value)
  }
}
//第二步：mutations--操作資料
const mutations={
     //上面的執行commit時候直接來這裡找“JIA”
    //JIA直接拿原來資料和運算元改進
    JIA(state,value){
       state.num+=value
     }
}

/*第三步：state：儲存資料*/
const state={
     num:0
}
//建立並爆乳store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

main.js

//引入vue
import Vue from 'vue'
//引入app元件
import App from './App.vue'
import Vuex from  'vuex'
import store from './store'
//關閉生產提示
Vue.config.productionTip = false
Vue.use(Vuex)
//建立vm例項
new Vue({
    //這句話會讓所有的vc獲得$store
    store:store,
    render: h => h(App),
}).$mount('#app')