vuex——vue简单说

电玩女神 2022-02-28 04:16 245阅读 0赞

### 文章目录 ###

*  应用场景
 *  基本用法
 *   *  安装
     *  项目源码
     *  学习结构图
 *  知识点
 *   *  基础示例
     *  mutations 修改数据
     *  getters 处理及筛选数据
     *  actions 异步操作业务逻辑
     *  modules 模块分隔

# 应用场景 #

用于非父子组件通信，可以更好的管理整个项目的组件状态。应用于大型单页面应用，更适合多人协同开发。  
vuex中的store包含了应用的数据（状态）和操作过程。Vuex里的数据都是响应式的，任何一个组件使用同一个store里的数据时，只要store变化，对应的组件也会立即更新。

# 基本用法 #

使用脚手架搭建一个项目 参考：[Vue-cli 搭建简单 路由项目][Vue-cli _]

## 安装 ##

命令行：

npm install --save vuex

修改入口文件 main.js 添加配置：

import Vuex from 'vuex';
    Vue.use(Vuex);
    const store = new Vuex.Store({ 
      // vuex的配置
    })
    
    new Vue({ 
      el: '#app',
      router,
      store: store, // 使用vuex
      components: {  App },
      template: '<App/>'
    })

## 项目源码 ##

当前文档的项目源码： [vue-template][]

## 学习结构图 ##

直接操作数据

处理及过滤数据

异步操作逻辑

store

mutations

getters

actions

modules

# 知识点 #

## 基础示例 ##

实现一个计数器，初始值为1：  
main.js

const store = new Vuex.Store({ 
      // vuex的配置
      state: { 
        count: 1
      }
    })

组件内例如：HelloWorld.vue

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <h2>count: {
       { $store.state.count }}</h2>
        <h2>推荐使用计算属性：count: {
       { count }}</h2>
      </div>
    </template>
    
    <script> export default { name: 'HelloWorld', data () { return { msg: '绑定vuex中state里count的值：' } }, computed:{ count: function(){ return this.$store.state.count; } } } </script>

运行结果：

> 绑定vuex中state里count的值：  
> count: 1  
> 推荐使用计算属性：count: 1

## mutations 修改数据 ##

可接收两个参数，第一个参数为当前的state，第二个参数为传递过来的参数值。实例如下：  
main.js

const store  = new Vuex.Store({ 
      // 配置
      state: { 
        count: 1
      },
      // 直接操作数据
      mutations: { 
        add:function(state, num=0){ 
          state.count = state.count + num;
        }
      },
    })

组件内例如：HelloWorld.vue

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <h2>count: {
       { $store.state.count }}</h2>
        <h2>推荐使用计算属性:count: {
       { count }}</h2>
        <button @click="add()">增加</button>
      </div>
    </template>
    
    <script> export default { name: 'HelloWorld', data () { return { msg: '绑定vuex中state里count的值：' } }, computed:{ count: function(){ return this.$store.state.count; } }, methods:{ add:function(){ this.$store.commit('add', 10); }, } } </script>

运行结果：点击一下按钮，效果如下

> 绑定vuex中state里count的值：  
> count: 11  
> 推荐使用计算属性:count: 11

## getters 处理及筛选数据 ##

废话不多说，直接上示例：  
main.js

组件内例如：HelloWorld.vue

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <h2>count: {
       { $store.state.count }}</h2>
        <h2>推荐使用计算属性:count: {
       { count }}</h2>
        <button @click="add()">增加</button>
        <h2>getters:count: {
       { countDanwei }}</h2> 
      </div>
    </template>
    
    <script> export default { name: 'HelloWorld', data () { return { msg: '绑定vuex中state里count的值：' } }, computed:{ count: function(){ return this.$store.state.count; }, countDanwei: function(){ return this.$store.getters.addDanwei; } }, methods:{ add:function(){ this.$store.commit('add', 10); } } } </script>

运行结果如下：

> 绑定vuex中state里count的值：  
> count: 1  
> 推荐使用计算属性:count: 1  
> 增加  
> getters:count: 1px

## actions 异步操作业务逻辑 ##

涉及改变数据的，使用mutations，存在业务逻辑的或者异步操作，就用actions。  
main.js

组件内例如：HelloWorld.vue

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <h2>count: {
       { $store.state.count }}</h2>
        <h2>推荐使用计算属性:count: {
       { count }}</h2>
        <button @click="add()">增加</button>
        <h2>getters:count: {
       { countDanwei }}</h2> 
        <button @click="actionS()">增加actionS</button>
      </div>
    </template>
    
    <script> export default { name: 'HelloWorld', data () { return { msg: '绑定vuex中state里count的值：' } }, computed:{ count: function(){ return this.$store.state.count; }, countDanwei: function(){ return this.$store.getters.addDanwei; } }, methods:{ add:function(){ this.$store.commit('add', 10); }, actionS: function(){ this.$store.dispatch('addActions').then(function(){ console.log("执行结束！！") }); } } } </script>

运行结果：等待两秒后，才出现count增加了100，控制台打印“执行结束”

> 绑定vuex中state里count的值：  
> count: 101  
> 推荐使用计算属性:count: 101  
> 增加  
> getters:count: 101px  
> 增加actionS

## modules 模块分隔 ##

用来将store分割到不同模块，实例如下：  
main.js

// 模块a
    const moduleA = { 
      state: { 
        count: 5
      }
    }
    // 模块b
    const moduleB = { 
      state: { 
        count: 10
      }
    }
    const store  = new Vuex.Store({ 
      // 配置
      state: { 
        count: 1
      },
      // 直接操作数据
      mutations: { 
        add:function(state, num=0){ 
          state.count = state.count + num;
        }
      },
      // 处理或过滤数据
      getters: { 
        addDanwei: function(state){ 
          return state.count+'px';
        }
      },
      // 异步的处理
      actions: { 
        addActions:function(context){ 
          return new Promise(function(resolve,reject){ 
            setTimeout(function(){ 
              context.commit('add',100);
              resolve();
            },2000)
          })
        }
      },
      modules: { 
        a: moduleA, // 模块a
        b: moduleB, // 模块b
      }
    })

组件内例如：HelloWorld.vue

<h2>modulesA:count：{
       { $store.state.a.count }}</h2>
        <h2>modulesB:count: {
       { $store.state.b.count }}</h2>

运行结果：

> modulesA:count：5  
> modulesB:count: 10

--------------------

本篇完。。。有误联系我改

[Vue-cli _]: https://blog.csdn.net/u012551928/article/details/84335856
[vue-template]: https://download.csdn.net/download/u012551928/11058961