欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

记录vuex的初步使用

程序员文章站 2024-02-15 13:13:34
...

 目录结构

记录vuex的初步使用

 main.js


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex' // step:1
Vue.config.productionTip = false

Vue.use(Vuex) // step:2
/* eslint-disable no-new */

// step:3 创建store对象
const store = new Vuex.Store({
  // 全局状态
  state:{
    count:0,
    msg: 'zzz'
  },
  getters:{

  },
  mutations:{
    increment(state){
      state.count += 1
    },
    decrement(state){
      state.count -= 1
    }
  },
  actions:{ // 通常处理逻辑相关的事情
    async myincrement(context){
      context.commit('increment')

      const products = [1,2,3,4,5] // await axios.get(......)

      return products
    },
    mydecrement(context){
      context.commit('decrement')
    }
  }
})

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store // step4 vue实例中引入。store挂载到vue实例中
})



App.vue

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    在App.vue中显示store中的值:<br></br>{{count + '--msg:' + msg}}
    <StoreDemo></StoreDemo>
  </div>
</template>

<script>
import { mapState } from 'vuex' //引入辅助函数 mapState
import HelloWorld from './components/HelloWorld'
import StoreDemo from './components/StoreDemo'


export default {
  name: 'App',
  components: {
    HelloWorld,StoreDemo
  },
  computed:{
    ...mapState(['count','msg'])
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
StoreDemo.vue
<template>
    <div>
      <div style="display: none;">
        将改变全局状态的动作放在了StoreDemo.vue这个组件中,放在这个组件中也有这样一个目的:
      在不同的组件中操作全局状态。
      </div><br>
      <button @click="increase">增加</button>
      <button @click="decrease">减少</button><br>
      <button @click="increment">增加2</button>
      <button @click="decrement">减少2</button><br>
      <button @click="add">增加3</button>
      <button @click="del">减少3</button><br>
      测试store--{{count + '--msg:' + msg}}
    </div>
</template>

<script>
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
  name: "StoreDemo",
  data(){
    return {
      num:10,
    }
  },
  //方式一 普通获取store中的状态
  // computed:{
  //   count(){
  //     return this.$store.state.count
  //   },
  //   msg(){
  //     return this.$store.state.msg
  //   }
  // },
  // 方式二
  // computed:mapState({
  //   //1,箭头函数
  //   count:state=>state.count,
  //   //2,c传字符串参数‘count’等同于 state=>state.count
  //   countAlisa:'count',
  //   countlocalState(state){
  //     return state.count + this.num
  //   }
  // }),
  // 方式三 对象的展开运算符
  // computed:{
  //   ...mapState({
  //     countAlisa:'count',
  //     countlocalState(state){
  //       return state.count + this.num
  //     },
  //     count:state=>state.count
  //   })
  // },
  computed:{
      ...mapState(['count','msg'])
  },
  methods:{
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      'decrement']),
    ...mapMutations({
      add: 'increment', // 将 `this.add()` 映射为 `this.$store.commit('increment')`
      del: 'decrement'
    }),
    ...mapActions(['myincrement','mydecrement']),
    async increase() {
      // this.$store.commit('increment') // 可行
      // this.increment() // 可行
      const products = await this.myincrement()
      console.log(products)
    },
    decrease(){
      //this.$store.commit('decrement') // 可行
      //this.decrement() // 可行
      this.mydecrement()
    }
  }
}
</script>

<style scoped>

</style>

 

相关标签: vue相关