vuex

目录

1.1 功能简介

1.2 下载以及安装

1.3 state核心组件

1.4 Mutations组件

1.5 Actions组件

1.6 模块化管理

1.7 持久存储

1.8 案例

---

1.1 功能简介

1、当写vue项目时，当涉及到频繁的组件之间的数据通讯、一个组件需要多次派发事件时，我们的代码就会变得复杂、冗余、难以维护

2、Vuex是一个专为Vue.js应用程序开发的状态管理模式。我们可以把一些共享的数据保存至vuex中，方便各个组件修改或获取公共状态。

3、vue的单向数据流的简洁性在以下情况下很容易被破坏

• 多个视图依赖于同一状态

• 来自不同视图的行为需要改变同一状态

  解决思想：

  我们可以把组件的共享状态提取出来，作为全局单例模式管理。这样，组件树构成了一个巨大的视图，不论在树的哪个位置，都能获取状态或触发行为。

4、vuex的示意图

 

1.2 下载以及安装

1、vuex的安装方式

• 步骤1：在package.json文件中的dependencies属性中增加vue的依赖包声明

  "dependencies": {
          "vuex": "^3.0.1",
          "vuex-persistedstate": "^2.5.4"
      }

• 步骤2：使用cmd指令进入package.json所在目录执行安装指令,安装后在node_modules目录下生成vuex、vuex-persistedstate包

  npm install

• 步骤3：在独立的store配置文件中引入vuex组件（如：store.js）

  import Vue from'vue'
  import Vuex from 'vuex' 
  import createPersistedState from "vuex-persistedstate"
  //使用vuex插件
  Vue.use(Vuex)

• 步骤4：创建vuex全局实例对象，并设定持久化插件

  export default new Vuex.Store({
      //全局状态
      state:{loginStatus:false},
      //同步数据提交
      mutations:{},
      //引入持久化组件
      plugins:[createPersistedState()]
  })

• 步骤5：在main.js中引入vuex实例，并以插件的方式添加到组件实例对象中

  import store from './store'
  ​
  new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
  })

vue的所有组件可以通过this.$store.state访问全局状态

 VuexTest.vue

<template>
  <div class="myDiv">
    <div>直接通过this.$store.state.count获取值:{
  {this.$store.state.count}}</div>
    <div>this.$store.state.count赋值data中的count属性，通过count属性获取值:{
  {count}}</div>
    <div>通过计算属性获得的this.$store.state.count:{
  {count1}}</div>
    <input type="button" value="+" @click="add"></input>
    <input type="button" value="-" @click="sub"></input>
    <router-link :to="{name:'VuexTest1'}">VuexTest1</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "VuexTest",
    data() {
      return {
        //这样写有隐患(消除隐患用computed), 如果页面元素双向绑定count, 就会直接改变this.$store.state.count
        //this.$store.state.count 定义的全局属性值不能直接改变, 会有多个组件显示不统一的情况
        count: this.$store.state.count
      }
    },
    computed: {
      //count1只有get方法没有set方法, 不能直接改变this.$store.state.count的值
      count1() {
        return this.$store.state.count;
      }
    },
    methods: {
      add() {
        //不能直接修改
        //this.$store.state.count++;
        //提交事件
        // this.$store.commit("addCount", {num: 1});
        //直接改变count才能使页面重新渲染
        // console.log(this.count);//页面刷新count没有改变值
        // this.count++;//data的count是间接改变, 不能直接赋值改变。this.count++是直接改变。
        //this.$store.dispatch触发store模块定义actions定义的异步事件
        this.$store.dispatch("addCountAsync", {num: 1});
      },
      sub() {
        // this.$store.commit("subCount", {num: 1});