vue vuex

古城微笑少年丶 2021-11-01 06:34 420阅读 0赞

1.vuex 是一个专门为vue.js应用程序开发的状态管理模式（ 一般由 main.js 引入，是全局数据：用于组件间通信的 共享数据）

2. 关键对象

state：存储状态（变量）/ 状态树 （包含所有需要共享的资源）

getters：对数据获取之前的再次编译（简化原始状态数 state），可以理解为state的计算属性 （也可以直接操作 state 搞成一个计算属性 ）

mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。  （更改 Vuex 的 store 中的状态的唯一方法是提交 mutation）

actions：异步操作。在组件中使用是$store.dispath('') 。  （action 的作用跟mutation的作用是一致的，提交mutation，从而改变state）

actions 类似于 mutation，不同在于：

actions 提交的是 mutation，而不是直接变更状态，actions 可以包含任意异步操作

3. 脚手架环境

vue init webpack app

cd app

npm install vuex --save

npm run dev

src目录下创建一个vuex文件夹，vuex文件夹下新建一个store.js文件

4. 关键代码

入口文件 main.js

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './vuex/store' // 引入store
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

状态管理配置文件 store.js  （当代码量大时，可以分别写个.js文件再引入，如 state.js）

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const state = {
        count: 0
    }
    
    const mutations = {
        mutationsAddCount:(state, n = 0) => {
            return state.count += n
        },
        mutationsReduceCount(state, n = 0) {
            return (state.count -= n)
        }
    }
    
    const actions = {
        actionsAddCount(context, n = 0) {
            console.log(context)
            return context.commit('mutationsAddCount', n)
        },
        actionsReduceCount({ commit }, n = 0) {
            return commit('mutationsReduceCount', n)
        }
    }
    
    
    const getters = {
        getterCount(state) {
            return state.count
        }
    }
    
    export default new Vuex.Store({
        state,
        mutations,
        actions,
        getters
    })

实例组件 HelloWorld.vue

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<template>
      <div class="hello">
        <h3>{
         {$store.state.count}}</h3>
        <div>
          <button @click="handleAddClick(10)">增加</button>
          <button @click="handleReduceClick(10)">减少</button>
        </div>
    
        <div>异步操作</div>
        <div>
          <button @click="handleActionsAdd(20)">异步增加</button>
          <button @click="handleActionsReduce(20)">异步减少</button>
        </div>
        <h4>{
         {myCount}}</h4>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleAddClick(n) {
          this.$store.commit("mutationsAddCount", n);
        },
        handleReduceClick(n) {
          this.$store.commit("mutationsReduceCount", n);
        },
        handleActionsAdd(n) {
          this.$store.dispatch("actionsAddCount", n);
        },
        handleActionsReduce(n) {
          this.$store.dispatch("actionsReduceCount", n);
        }
      },
      computed: {
        myCount() {
          return this.$store.getters.getterCount+10;
        }
      }
    };
    </script>
    
    <style>
    </style>

4.1   import \{ mapState, mapMutations, mapActions, mapGetters \} from "vuex";   版本

HelloWorld.vue

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<template>
      <div class="hello">
        <h3>{
         {mapCount}}</h3>
        <div>
          <button @click="handleAddClick(10)">增加</button>
          <button @click="handleReduceClick(10)">减少</button>
        </div>
    
        <div>异步操作</div>
        <div>
          <button @click="handleActionsAdd(20)">异步增加</button>
          <button @click="handleActionsReduce(20)">异步减少</button>
        </div>
        <h4>{
         {getterCount}}</h4>
      </div>
    </template>
    
    <script>
    import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
    export default {
      methods: {
        ...mapMutations({
          handleAddClick: "mutationsAddCount",
          handleReduceClick: "mutationsReduceCount"
        }),
        ...mapActions({
          handleActionsAdd: "actionsAddCount",
          handleActionsReduce: "actionsReduceCount"
        })
      },
      computed: {
        //获取store里面的state值到本地
        ...mapState({
          mapCount: state => state.count
        }),
        //获取store中的getter值
        // ...mapGetters({
          
        //   getterCount: 'getterCount' 
        // })
        ...mapGetters(['getterCount'])
      }
    };
    </script>
    
    <style>
    </style>

5. 参考链接

[vuex 中文版][vuex]

[export  、 export default  区别][export_ _ export default_]

转载于:https://www.cnblogs.com/justSmile2/p/11144463.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211101/d99c9c3085934c8782315ba395505816.png
[vuex]: https://vuex.vuejs.org/zh/guide/getters.html#mapgetters-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0
[export_ _ export default_]: https://www.cnblogs.com/xiaotanke/p/7448383.html