Vuex

一、定义全局状态管理信息

//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)
//创建一个全局状态对象并导出
export default new Vuex.Store({
  state: {
    carName: '大众',
    carPrice: '100W',
    carAddress: '南京',
  },
})

二、在Home组件里面使用

在组件中显示汽车名称、汽车价格、汽车产地

可以直接写一个计算属性，然后直接调用里面的方法。

<template>
  <div class="home">
     <h2>Home</h2>
     <div class="car">
        <h3>汽车信息</h3>
        <!-- 直接在模板中使用全局状态管理数据，表达式会写的很长 -->
        <div>汽车名称：{{$store.state.carName}}</div>
        <div>汽车价格：{{$store.state.carPrice}}</div>
        <div>汽车产地：{{$store.state.carAddress}}</div>
        <hr>
        <div>汽车名称：{{carName}}</div>
        <div>汽车价格：{{carPrice}}</div>
        <div>汽车产地：{{carAddress}}</div>
     </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  //计算属性
  computed:{
    //汽车名称
    carName(){
      //在计算属性中，对全局状态管理数据进行中转
      return this.$store.state.carName
    },
    //汽车价格
    carPrice(){
      return this.$store.state.carPrice
    },
    //汽车产地
    carAddress(){
      return this.$store.state.carAddress
    },
  }
}
</script>
<style lang="scss" scoped>
.home{
  border: 1px solid #ccc;
  padding: 5px;
  .car{
    border: 1px solid #ccc;
    padding: 5px;
    hr{
      margin: 10px 0;
    }
    button{
      margin: 0 10px;
    }
  }
}
</style>

三、getters选项定义计算属性，里面的第一个参数是全局状态

//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)
//创建一个全局状态对象并导出
export default new Vuex.Store({
  state: {
    carName: '大众',
    carPrice: '100W',
    carAddress: '南京',
  },
  //getters选项定义计算属性
  getters: {
    //方法的第一个参数是全局状态
    carInfo(state) {
      return `汽车名称：${state.carName}，汽车价格：${state.carPrice}，汽车产地：${state.carAddress}`
    },
  }
})

在Home组件里面显示这个getters计算属性

也可以在computed计算属性里面写一个方法，然后调用这个方法。

<template>
  <div class="home">
     <h2>Home</h2>
     <div class="car">
        <h3>汽车信息</h3>
        <!-- 直接在模板中使用全局状态管理数据，表达式会写的很长 -->
        <div>汽车名称：{{$store.state.carName}}</div>
        <div>汽车价格：{{$store.state.carPrice}}</div>
        <div>汽车产地：{{$store.state.carAddress}}</div>
        <hr>
        <div>汽车名称：{{carName}}</div>
        <div>汽车价格：{{carPrice}}</div>
        <div>汽车产地：{{carAddress}}</div>
        <hr>
        <div>{{$store.getters.carInfo}}</div>
        <div>{{carInfo}}</div>
     </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  //计算属性
  computed:{
    //汽车名称
    carName(){
      //在计算属性中，对全局状态管理数据进行中转
      return this.$store.state.carName
    },
    //汽车价格
    carPrice(){
      return this.$store.state.carPrice
    },
    //汽车产地
    carAddress(){
      return this.$store.state.carAddress
    },
    //汽车信息
    carInfo(){
      //返回全局状态管理里面的计算属性
      return this.$store.getters.carInfo
    }
  }
}
</script>
<style lang="scss" scoped>
.home{
  border: 1px solid #ccc;
  padding: 5px;
  .car{
    border: 1px solid #ccc;
    padding: 5px;
    hr{
      margin: 10px 0;
    }
    button{
      margin: 0 10px;
    }
  }
}
</style>

四、mutations选项定义操作状态的方法（这里的方法是同步方法），每种方法里面有两个参数，第一个是状态对象，第二个是具体的值

//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
import axios from 'axios'
//使用vuex
Vue.use(Vuex)
//创建一个全局状态对象并导出
export default new Vuex.Store({
  state: {
    carName: '大众',
    carPrice: '100W',
    carAddress: '南京',
    phones:[]
  },
  //getters选项定义计算属性
  getters: {
    //方法的第一个参数是全局状态
    carInfo(state) {
      return `汽车名称：${state.carName}，汽车价格：${state.carPrice}，汽车产地：${state.carAddress}`
    },
  },
  //mutations选项定义操作状态的方法，（这里面的方法时同步方法）
  mutations: {
    //修改汽车名称
    //方法的第一个参数是状态对象，第二个参数是具体的值
    updateCarName(state, val) {
      state.carName = val
    },
    updateCarPrice(state, val) {
      state.carPrice = val
    }
  }
})

在Home组件里面使用mutation选项里面定义的方法

commit（）方法，调用的是mutations里面定义的方法。

<template>
  <div class="home">
     <h2>Home</h2>
     <div class="car">
        <h3>汽车信息</h3>
        <!-- 直接在模板中使用全局状态管理数据，表达式会写的很长 -->
        <div>汽车名称：{{$store.state.carName}}</div>
        <div>汽车价格：{{$store.state.carPrice}}</div>
        <div>汽车产地：{{$store.state.carAddress}}</div>
        <hr>
        <div>汽车名称：{{carName}}</div>
        <div>汽车价格：{{carPrice}}</div>
        <div>汽车产地：{{carAddress}}</div>
        <hr>
        <!-- 直接在模板中使用全局状态里面的计算属性 -->
        <div>{{$store.getters.carInfo}}</div>
        <div>{{carInfo}}</div>
        <hr>
        <!-- 直接在模板中调用全局状态管理里面定义的方法，表达式会写的很长 -->
        <button @click="$store.commit('updateCarName','别克')">修改汽车名称</button>
        <button @click='updateCarPrice'>修改汽车价格</button>
     </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  //计算属性
  computed:{
    //汽车名称
    carName(){
      //在计算属性中，对全局状态管理数据进行中转
      return this.$store.state.carName
    },
    //汽车价格
    carPrice(){
      return this.$store.state.carPrice
    },
    //汽车产地
    carAddress(){
      return this.$store.state.carAddress
    },
    //汽车信息
    carInfo(){
      //返回全局状态管理里面的计算属性
      return this.$store.getters.carInfo
    }
  },
  methods: {
    //修改汽车价格
    updateCarPrice(){
      //调用全局状态管理的方法，修改指定的状态数据
      //commit()方法，调用的是mutations里面定义的方法
      this.$store.commit('updateCarPrice','200W')
    }
}
</script>
<style lang="scss" scoped>
.home{
  border: 1px solid #ccc;
  padding: 5px;
  .car{
    border: 1px solid #ccc;
    padding: 5px;
    hr{
      margin: 10px 0;
    }
    button{
      margin: 0 10px;
    }
  }
}
</style>

五、actions选项定义操作状态的方法（这里面可以写异步方法），这里的方法不要直接操作状态，而是通过调用mutations里面的方法去修改状态。

这里面定义的方法有两个参数，第一个参数是全局状态管理对象，第二个参数是具体的值。

在public文件夹里新建一个data文件夹，在此文件夹里在新建一个address.json文件

{
    "carAddress":"中国"
}

重新打开一个终端，下载axios包

npm install axios

在全局状态中引入axios

//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
import axios from 'axios'
//使用vuex
Vue.use(Vuex)
//创建一个全局状态对象并导出
export default new Vuex.Store({
  state: {
    carName: '大众',
    carPrice: '100W',
    carAddress: '南京',
    phones:[]
  },
  //getters选项定义计算属性
  getters: {
    //方法的第一个参数是全局状态
    carInfo(state) {
      return `汽车名称：${state.carName}，汽车价格：${state.carPrice}，汽车产地：${state.carAddress}`
    },
    totalPrice(state){
      return state.phones.map(r=>r.price).reduce((a,b)=>a+b,0)
    }
  },
  //mutations选项定义操作状态的方法，（这里面的方法时同步方法）
  mutations: {
    //修改汽车名称
    //方法的第一个参数是状态对象，第二个参数是具体的值
    updateCarName(state, val) {
      state.carName = val
    },
    updateCarPrice(state, val) {
      state.carPrice = val
    },
    updateCarAddress(state, val) {
      state.carAddress = val
    }
  },
  //actions选项定义操作状态的方法
  //注意1：这里的方法可以写异步方法
  //注意2：这里的方法不要直接操作状态，通过再调用mutations里面的方法去修改状态
  actions: {
    //修改汽车产地的方法
    //方法的第一个参数是全局状态管理对象，第二个参数是具体的值
    updateCarAddress(store, val) {
      axios.get(val).then(({ data }) => {
        //方式1：这里可以直接修改状态
        //  store.state.carAddress=data.carAddress
        //方式2：通过调用mutations里面的方法修改状态
        store.commit('updateCarAddress',data.carAddress)
      })
    }
  }
})

在Home组件里面使用actions选项里面定义的方法

dispatch（）方法，调用的是actions里面定义的方法。

<template>
  <div class="home">
     <h2>Home</h2>
     <div class="car">
        <h3>汽车信息</h3>
        <!-- 直接在模板中使用全局状态管理数据，表达式会写的很长 -->
        <div>汽车名称：{{$store.state.carName}}</div>
        <div>汽车价格：{{$store.state.carPrice}}</div>
        <div>汽车产地：{{$store.state.carAddress}}</div>
        <hr>
        <div>汽车名称：{{carName}}</div>
        <div>汽车价格：{{carPrice}}</div>
        <div>汽车产地：{{carAddress}}</div>
        <hr>
        <!-- 直接在模板中使用全局状态里面的计算属性 -->
        <div>{{$store.getters.carInfo}}</div>
        <div>{{carInfo}}</div>
        <hr>
        <!-- 直接在模板中调用全局状态管理里面定义的方法，表达式会写的很长 -->
        <button @click="$store.commit('updateCarName','别克')">修改汽车名称</button>
        <button @click='updateCarPrice'>修改汽车价格</button>
        <button @click='updateCarAddress'>修改汽车产地</button>
     </div>

  </div>
</template>

<script>

export default {
  name: 'Home',
  //计算属性
  computed:{
    //汽车名称
    carName(){
      //在计算属性中，对全局状态管理数据进行中转
      return this.$store.state.carName
    },
    //汽车价格
    carPrice(){
      return this.$store.state.carPrice
    },
    //汽车产地
    carAddress(){
      return this.$store.state.carAddress
    },
    //汽车信息
    carInfo(){
      //返回全局状态管理里面的计算属性
      return this.$store.getters.carInfo
    }
  },
  methods: {
    //修改汽车价格
    updateCarPrice(){
      //调用全局状态管理的方法，修改指定的状态数据
      //commit()方法，调用的是mutations里面定义的方法
      this.$store.commit('updateCarPrice','200W')
    },
    //修改汽车产地
    updateCarAddress(){
      //dispatch()方法，调用的是actions里面定义的方法
      this.$store.dispatch('updateCarAddress','data/address.json')
    }
  },
  
}
</script>
<style lang="scss" scoped>
.home{
  border: 1px solid #ccc;
  padding: 5px;
  .car{
    border: 1px solid #ccc;
    padding: 5px;
    hr{
      margin: 10px 0;
    }
    button{
      margin: 0 10px;
    }
  }
}
</style>

六、在views文件夹里面再新建Phone.vue文件,并显示手机信息

<template>
  <div class="phone">
    <h3>手机信息</h3>
    <ul>
        <li v-for='(item,index) in phones' :key='index'>{{item.name}}--{{item.price}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Phone",
  computed:{
      phones(){
          return this.$store.state.phones
      }
  },
  created() {
      this.$store.dispatch('loadPhones','data/phones.json')
  },
};
</script>
<style scoped>
.phone{
    border: 1px solid #ccc;
    padding: 5px;
}
hr{
    margin: 10px 0;
}
</style>

路由信息里面再定义一个手机的路由信息

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//定义路由信息(是一个数组，数组中每一个对象配置一条路由对象)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: ()=>import('../views/Home.vue')
  },
  {
    path:'/phone',
    name:'Phone',
    component:()=>import('../views/Phone.vue')
  }
]

//创建路由器对象
const router = new VueRouter({
  //将路由信息数组传给路由器对象去管理
  routes
})

//导出路由器对象
export default router

在app.vue里面加phone路由链接

 <router-link to="/phone">Phone</router-link>

新建一个名为phones.json的文件

[
    {
        "name":"小米手机",
        "price":2399
    },
    {
        "name":"华为手机",
        "price":3499
    }
]

在全局状态管理里面定义加载手机信息的方法

//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
import axios from 'axios'
//使用vuex
Vue.use(Vuex)
//创建一个全局状态对象并导出
export default new Vuex.Store({
  //state选项定义全局状态（数据）
  state: {
    carName: '大众',
    carPrice: '100W',
    carAddress: '南京',
    phones:[]
  },
  //getters选项定义计算属性
  getters: {
    //方法的第一个参数是全局状态
    carInfo(state) {
      return `汽车名称：${state.carName}，汽车价格：${state.carPrice}，汽车产地：${state.carAddress}`
    },
    totalPrice(state){
      return state.phones.map(r=>r.price).reduce((a,b)=>a+b,0)
    }
  },
  //mutations选项定义操作状态的方法，（这里面的方法时同步方法）
  mutations: {
    //修改汽车名称
    //方法的第一个参数是状态对象，第二个参数是具体的值
    updateCarName(state, val) {
      state.carName = val
    },
    updateCarPrice(state, val) {
      state.carPrice = val
    },
    updateCarAddress(state, val) {
      state.carAddress = val
    },
    loadPhones(state,val){
      state.phones=val
    }
  },
  //actions选项定义操作状态的方法
  //注意1：这里的方法可以写异步方法
  //注意2：这里的方法不要直接操作状态，通过再调用mutations里面的方法去修改状态
  actions: {
    //修改汽车产地的方法
    //方法的第一个参数是全局状态管理对象，第二个参数是具体的值
    updateCarAddress(store, val) {
      axios.get(val).then(({ data }) => {
        //方式1：这里可以直接修改状态
        //  store.state.carAddress=data.carAddress
        //方式2：通过调用mutations里面的方法修改状态
        store.commit('updateCarAddress',data.carAddress)
      })
    },
    loadPhones(store,val){
      axios.get(val).then(({data})=>{
        store.commit('loadPhones',data)
      })
    }
  }
})

在全局状态管理里面定义计算总价和添加手机信息的方法

//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
import axios from 'axios'
//使用vuex
Vue.use(Vuex)
//创建一个全局状态对象并导出
export default new Vuex.Store({
  //state选项定义全局状态（数据）
  state: {
    carName: '大众',
    carPrice: '100W',
    carAddress: '南京',
    phones:[]
  },
  //getters选项定义计算属性
  getters: {
    //方法的第一个参数是全局状态
    carInfo(state) {
      return `汽车名称：${state.carName}，汽车价格：${state.carPrice}，汽车产地：${state.carAddress}`
    },
    totalPrice(state){
      return state.phones.map(r=>r.price).reduce((a,b)=>a+b,0)
    }
  },
  //mutations选项定义操作状态的方法，（这里面的方法时同步方法）
  mutations: {
    //修改汽车名称
    //方法的第一个参数是状态对象，第二个参数是具体的值
    updateCarName(state, val) {
      state.carName = val
    },
    updateCarPrice(state, val) {
      state.carPrice = val
    },
    updateCarAddress(state, val) {
      state.carAddress = val
    },
    loadPhones(state,val){
      state.phones=val
    },
    //加载手机信息的方法（同步方法）
    addPhone(state,val){
      //最终是在mutations里面去修改状态
      state.phones.push(val)
    }
  },
  //actions选项定义操作状态的方法
  //注意1：这里的方法可以写异步方法
  //注意2：这里的方法不要直接操作状态，通过再调用mutations里面的方法去修改状态
  actions: {
    //修改汽车产地的方法
    //方法的第一个参数是全局状态管理对象，第二个参数是具体的值
    updateCarAddress(store, val) {
      axios.get(val).then(({ data }) => {
        //方式1：这里可以直接修改状态
        //  store.state.carAddress=data.carAddress
        //方式2：通过调用mutations里面的方法修改状态
        store.commit('updateCarAddress',data.carAddress)
      })
    },
    loadPhones(store,val){
      axios.get(val).then(({data})=>{
        store.commit('loadPhones',data)
      })
    }
  }
})

在Phone.vue里面使用getters选项里面定义的总价的方法、及mutations选项里面定义的添加手机信息的方法。

<template>
  <div class="phone">
    <h3>手机信息</h3>
    <ul>
        <li v-for='(item,index) in phones' :key='index'>{{item.name}}--{{item.price}}</li>
        <li>总价：{{totalPrice}}</li>
    </ul>
    <hr>
    <div>
        <span>手机名称：</span>
        <input type="text" v-model='phoneName'>
        <span>手机价格：</span>
        <input type="text" v-model.number='phonePrice'>
        <button @click='addPhone'>添加</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Phone",
  data(){
      return{
          phoneName:'',
          phonePrice:0
      }
  },
  computed:{
      phones(){
          return this.$store.state.phones
      },
      totalPrice(){
          return this.$store.getters.totalPrice
      }
  },
  created() {
      this.$store.dispatch('loadPhones','data/phones.json')
  },
  methods: {
      addPhone(){
        let phone={
            name:this.phoneName,
            price:this.phonePrice
        }
        this.$store.commit('addPhone',phone)
      }
  },
};
</script>
<style scoped>
.phone{
    border: 1px solid #ccc;
    padding: 5px;
}
hr{
    margin: 10px 0;
}
</style>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 认识Vuex
    学前准备 本文主要内容来源于官网，为Vuex的基础部分总结，部分案例也参考了互联网上其他分享知识的大佬。本手记结合...
    橙色流年阅读 396评论 0赞 1
  • vuex 使用说明
    安装 npm npm install vuex --save 在一个模块化的打包系统中，您必须显式地通过Vue.u...
    萧玄辞阅读 2,974评论 0赞 7
  • 11.vuex 探索之路
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应...
    白水螺丝阅读 4,703评论 7赞 61
  • Vue-cli——全局状态管理Vuex
    一、创建包 （1）创建 （2）在创建包的时候选manually select features 可以自定义选择选择...
    我的安娜有点菜阅读 714评论 0赞 0
  • Vuex学习笔记
    Vuex 是什么？ ** 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式**。它采用集中...
    Rz______阅读 2,328评论 1赞 10