笔记整理:关于VUE插件--VueX篇

一、Vuex介绍

1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单直白的理解:相当于全局变量,但和全局变量又有两点不同。

(1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时,若 store 中的状态变化,那么相应的组件也更新。

(2)不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。

2.中大型项目使用能很好解决组件间混乱的多层级数据传递通信问题。

二、Vuex核心模块

State 池 (数据源)
Getter 查 (获取数据源的数据,相当于vue的computed)
Mutation 修改 (真正修改的动作 同步)
Action 触发修改行为(多配合异步使用)
Module 可以拥有多个数据源(数据池)

vuex

三、demo示例

前言:示例是基于webpack 搭建的cli环境。
# 选webpack模板 搭建在一个叫pro_vuex的文件夹里
$ vue init webpack pro_vuex
1.安装vuex
# 进入项目安装并保存到依赖上
$ npm i vuex -S
2.建独立的状态管理文件夹store; 建输出js叫index.js
.
├── App.vue              //父组件
├── main.js              //入口文件
├── `store `             //状态管理文件夹
|   ├── modules          //多个数据源(数据池) 
│   └── `index.js`    
├── components
│   └── HelloWorld.vue   //子组件
├── router               //路由
│   └── index.js
└── assets
    └── logo.png
3.引入调用插件
  • 创建仓库 /store/index.js
    import引入插件;Vue.use使用插件;new Vuex.Store 实例化一个Vuex对象;暴露出去

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    
    // 实例化Vuex,创建一个仓库
    const store = new Vuex.Store({
        // 数据池
        state: {
            count: 0,
            author: 'tom'
        },
        // 可以对数据操作后返回 相当于vue里面的computed
        getters:{
            userName(state){
                return state.author +' hello';
            }
        },
        // 修改数据的方法 同步
        mutations: {
            // 修改数据的方法。 参数一固定state 后面随意
            increment(state,num) {
                state.count+=num
            }
        },
        // 修改数据的异步 方法
        actions:{
            // 参数一 执行上下文
            incrementAction(context,num) {
                context.commit("increment",num); //等同于在组件里面this.$store.commit("increment",18) 
            }
        }
    })
    
    // 暴露出去
    export default store
  • 入口文件引入仓库 main.js
    单页面应用程序中 在入口文件引用,其下子组件就全都能获取调用。

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    import store from './store/index.js' // 引入仓库
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      router,
      store, // 挂载仓库  key和value一样时 可以简写
      components: { App },
      template: `<App/>`
    })
  • 任意组件读取修改仓库 示例在components/HelloWorld.vue

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
    
        <h4>年龄: {{my_age}} </h4>
        <h4>用户名:{{name}} </h4>
        <h4>打招呼:{{userName}}</h4>
        <input type="button" @click="add_mutation" value="mutation方法修改年龄my_age">
        <br/>~~~~
        <input type="button" @click="add_action" value="action方法修改年龄my_age">
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: '来自子组件的亲切问候'
        }
      },
      computed:{
        my_age(){
          return this.$store.state.count
        },
        name(){
          return this.$store.state.author
        },
        userName(){
          return this.$store.getters.userName; //通过getters方法的 读取也要区分处理
        }
      },
      methods:{
        add_mutation(){
          this.$store.commit("increment",18) //调用store/index.js里面通过mutations定义的increment方法
        },
        add_action(){
          this.$store.dispatch("incrementAction",12);
        }
      }
    }
    </script>
    
    <style scoped>
    input {
      line-height: 1.6rem;
      margin: 10px;
    }
    </style>

    image.png

四、VueX基础用法说明

image.png
image.png

五、辅助函数

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用mapState辅助函数帮助我们生成计算属性。
mapState函数返回的是一个对象。

import { mapState } from "vuex";
computed: {
    ...mapState({
      author: state => state.author,
    })
}

mark一下 仅供参考 欢迎更正补充 Thanks


参考资料:
官网: https://vuex.vuejs.org/zh/
npm_vuex: https://www.npmjs.com/package...
source: https://github.com/Wscats/vue...

阅读 267

推荐阅读
喈喱前端笔记
用户专栏

学习的付出 从不欺人

4 人关注
30 篇文章
专栏主页