vuex——vue简单说

文章目录

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

应用场景

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

基本用法

使用脚手架搭建一个项目 参考: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: ''
})

项目源码

当前文档的项目源码: 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

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';
    }
  },
})

组件内例如: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

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)
      })
    }
  }
})

组件内例如: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()">增加actionSbutton>
  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,vue,vuex,vue插件)