一、创建包

（1）创建

vue create demo

（2）在创建包的时候选manually select features

可以自定义选择选择路由、css预处理器、vuex全局状态管理
sass选择dart-sass
保存并起名，之后可以选用这个创建项目

（3）如果创建名称想换换名字

在c盘用户->当前用户->找到.vuerc->用记事本打开文件

在presets里有之前配置的名称，不要的话就把预设删掉，下次就没有了

这就是vue脚手架配置文件

微信图片_20211219084856.png

二、state选项——定义全局状态

直接在模块中使用全局状态管理数据，表达式会写的很长

我们都会在计算属性中中转一下。计算属性里的方法可以直接当属性使用

直接在页面中使用全局状态管理数据
      <!-- 直接在模板中使用全局状态管理数据，表达式会写的很长 -->
      <div>汽车名称：{{$store.state.carName}}</div>
      <div>汽车价格：{{$store.state.carPrice}}</div>
      <div>汽车产地：{{$store.state.carAddress}}</div>

经过计算属性中转后页面书写方式
      <div>汽车名称：{{carName}}</div>
      <div>汽车价格：{{carPrice}}</div>

在计算属性中，对全局状态管理属性进行中转
export default {
  name: 'Home',
  //计算属性
  computed:{
    //汽车名称
    carName(){
      // 在计算属性中，对全局状态管理属性进行中转
      return this.$store.state.carName
    },
    // 汽车信息
    carInfo(){
      // 返回全局状态管理里面的计算属性
      return this.$store.getters.carInfo
    }
  },

三、getters选项——定义计算属性

（1）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)
    }
  },

（2）计算属性同样需要为了避免表达式过长，在中转后一下。再使用

直接在模板中使用全局状态里面的计算属性
      <div>{{$store.getters.carInfo}}</div>

使用转过后的计算属性
      <div>{{carInfo}}</div>

  //计算属性
  computed:{
      // 在计算属性中，对全局状态管理属性进行中转
    carPrice(){
      return this.$store.state.carPrice
    },
    carInfo(){
      // 返回全局状态管理里面的计算属性
      return this.$store.getters.carInfo
    }
  }

四、mutations——操作状态

（1）mutations选项定义操作状态的方法（这里的方法是同步方法）

所有的方法都有两个固定的参数，第一个参数是状态对象，第二个参数是传过来的值

commit()方法调用的是mutations里面定义的方法

直接在模板中调用全局状态管理里面定义的方法，表达式会写的很长 
      <button @click="$store.commit('updateCarName','保时捷')">修改汽车名称</button>

      <button @click="updateCarPrice">修改汽车价格</button>

store页面
  // mutations选项定义操作状态的方法（这里的方法是同步方法）
  mutations:{
    //修改汽车的名称
    //方法的第一个参数是状态对象，第二个参数是具体的值
    updateCarName(state,val){
      state.carName = val
    },
  },

组件页面
commit()方法，调用的是mutations里面定义的方法
  methods: {
    //修改汽车价格
    updateCarPrice(){
      // 调用全局状态管理的方法，修改指定的状态数据
      this.$store.commit('updateCarPrice','150W')
    },

五、actions选项——定义操作状态的方法(异步)

dispatch()方法调用的是actions里面定义的方法

1.这里的方法可以写异步方法

2.这里的方法不要直接操作状态，通过再调用mutations里面的方法去修改状态

3.方法的第一个参数是全局状态管理对象，第二个参数是具体的值

4.异步的先要在同步变值，再在异步中请求数据，并通过调用同步把值传过去

（1）修改状态的方式有两种

方式一：可以直接通过store.state.xx=赋值的方式修改状态

        store.state.carAddress = data.address

方式二：通过调用mutations里面的方法修改状态

   store.commit('updateCarAddress',data.address)

（2）这里推荐第二种

1.先要在mutation里写方法

2.再在actions中定义方法有两个参数，第一个参数是状态对象，第二个参数是操作的数据，下载并引入axios，发送axios请求使用then接收请求到的数据，调用mutations里的commit方法,

store页面
  mutations:{
    updateCarAddress(state,val){
      state.carAddress = val
    }}
  actions:{
    updateCarAddress(store,val){
      axios.get(val).then(({data})=>{
        store.commit('updateCarAddress',data.address)
      })
    }
    }}

组件页面
          <li v-for="(item,index) in phones" :key="index">{{item.name}}--{{item.price}}
          <li>总价：{{totalPrice}}</li>
          <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() {
    // 加载手机信息
    // dispatch调用的是actions里面的方法
    this.$store.dispatch('loadPhones','data/phones.json')
  },
  methods: {
      addPhone(){
          let phone = {
              name:this.phoneName,
              price:this.phonePrice
          }
          // commit调用的是mutations里面的方法
          this.$store.commit('addPhone',phone)
      }
  },
};