Vue：store（变量共享）

在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')