vuex——vue简单说

版权声明：本文为博主原创文章，随便转载，出处注明一哈 https://blog.csdn.net/u012551928/article/details/88778685

应用场景

用于非父子组件通信，可以更好的管理整个项目的组件状态。应用于大型单页面应用，更适合多人协同开发。
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: '<App/>'
})

项目源码

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

学习结构图

知识点

基础示例

实现一个计数器，初始值为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()">增加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

---

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