vue 简单版状态机（vuex）

indexjs

import service from '/servicejs';

import Vue from 'vue'

import Vuex from 'vuex'

Vueuse(Vuex)

const store = new VuexStore({

  state: {

    /

      是否需要强制登录

     /

    forcedLogin: true,

    hasLogin: false,

    userName: "",

msg: {}

  },

  mutations: {

    login(state, userName) {

      stateuserName = userName || '新用户';

      statehasLogin = true;

    },

    logout(state) {

      stateuserName = "";

      statehasLogin = false;

serviceremoveUser();

    },

setmsg(state, msg) {

statemsg = msg

}

  }

})

export default store

———————————————————————————————————————————————————————————————

引入：import {

             mapState,

             mapMutations

          } from 'vuex'

设置值：

              methods: {

                    mapMutations(['login', 'setmsg']),

              }

              let userMsg = {

                       user_grade: datadatauser_grade,

                       discount_rate: datadatadiscount_rate

              }

  thatsetmsg(userMsg);

获取值：

            computed:{

                mapState(['forcedLogin', 'hasLogin', 'userName','msg']),

            }

            thismsg(就可以出来了)

Vuex的5个属性：

一、state：

vuex的基本数据,用来存储变量。

二、getter：

从基本数据(state)派生的数据，相当于store的计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

三、mutation：

提交更新数据的方法,必须是同步的(如果需要异步使用action)，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

四、action：

和mutation的功能大致相同，不同之处在于：

1、Action提交的是 mutation，而不是直接变更状态。

2、Action可以包含任意异步 *** 作。

五、modules：

模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，管理更为方便。

属性概述：

属性是一个汉语词汇，拼音是shǔ xìng。意思是人类对于一个对象的抽象方面的刻画。

一个具体事物，总是有许许多多的性质与关系，我们把一个事物的性质与关系，都叫作事物的属性。事物与属性是不可分的，事物都是有属性的事物，属性也都是事物的属性。一个事物与另一个事物的相同或相异，也就是一个事物的属性与另一事物的属性的相同或相异。

由于事物属性的相同或相异，客观世界中就形成了许多不同的事物类。具有相同属性的事物就形成一类，具有不同属性的事物就分别地形成不同的类。

苹果是一类事物，它是由许多具有相同属性的个别事物组成的。梨也是一类事物，它也是由许多具有相同属性的个别事物组成的。苹果和梨是两个不同的类。苹果这个类的共同属性是不同于梨这个类的共同属性的。

Vuex 是一个专为 Vuejs 应用程序开发的 状态管理模式 + 库 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

state：存储数据，存储状态；在根实例中注册了store 后，用this$storestate来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。

getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

action：包含任意异步 *** 作，通过提交 mutation 间接更变状态。

module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

Vuex 是Vue的一种状态管理模式，专门为Vue设计的，集中式组件管理状态，我们通常不会这么做，通常使用的是子父传值，父子传值，兄弟传值，父直接用子，子直接用父，当组件之间的传值满足不了需求，来自不同视图需要变更同一个状态，会使用状态管理器，通俗的来讲就是你觉得你现有的功能满足不了项目需求，需要使用那么就使用，如果不需要使用那么就不使用，使用它并没有绝对的条件。

Vuex 使用 单一状态树 ——是的，用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

store 中的状态的唯一提交方法 

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步 *** 作。

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成 模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

Vuex有五个核心概念：

1、state：vuex的基本数据，用来存储变量(后四个属性都是用来 *** 作state里面储存的变量的)。

2、getters：是对state里面的变量进行过滤的。

3、mutation:提交更新数据的方法，必须是同步的(如果需要异步使用action)。

4、action：和mutation的功能大致相同，不同之处在于：

            1Action提交的是mutation，而不是直接变更状态。  也就是action是用来修改mutation并提交的  而  mutation是通过修改state

             2Action可以包含任意异步 *** 作。(一般比较复杂的数据都在action中 *** 作)

             3action先会执行异步 *** 作再去调用mutation，随后才跟新state

5、modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

dispatch：是跟action一块用的，含有异步 *** 作，例如向后台提交数据，写法： this$storedispatch('mutation的方法名',获取值)

commit：是跟mutation一块用的，同步 *** 作 ，写法： this$storecommit('mutation的方法名',获取值)

vuex是一个专门为vue构建的状态管理工具，主要是解决多组建状态共享的问题。强调的是集中式管理（组件与组件之间的关系变成了组建跟仓库之间的关系）。

vuex的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求拿到数据）、getters（根据之前的状态发布新的状态）、modules（模块划分）

state发布一条新的数据，在getters里面更具状态派发新的状态，actions发送异步请求获取数据，然后再mutations里面同步的更新数据

使用场景：购物车的数据共享，登入注册

vuex的原理：

vuex实现了一个单项数据流，在全局又有一个state存放数据，当组建要更改state中的数据时，必须通过Mutation进行，mutation同时提供了订阅者模式供外部插件调用获取state数据的更新。而当所有异步 *** 作（常见于调用后台接口异步获取更新数据）或批量的同步 *** 作需要走Action，但Action也是无法直接修改state的，还是需要通过mutation来修改state的数据。最后根据state的变化，渲染到视图上。

vuex的使用

1、src目录下面新建一个vuex的文件夹

2、vuex 文件夹里面新建一个storejs

3、安装vuex 

cnpm install vuex --save

4、在刚才创建的storejs引入vue  引入vuex 并且use vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vueuse(Vuex)

5、定义数据

/1state在vuex中用于存储数据/

var state={

    count:1

}

6、定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据

var mutations={

    incCount(){

++statecount;

    }

}

暴露

const store = new VuexStore({

    state,

    mutations,

getters

})

export default store;

组建里面的使用

1引入 store

import store from '/vuex/storejs';

2、注册

export default{

data(){

    return {             

      msg:'我是一个home组件',

value1: null,

    }

},

store,

methods:{

    incCount(){

this$storecommit('incCount');  /触发 state里面的数据/

    }

}

    }

3、获取state里面的数据

this$storestate数据

4、触发 mutations 改变 state里面的数据

this$storecommit('incCount');

getters，有点类似计算属性，改变state里面count数据的时候，会出发getters里面的方法，获取新值

var getters={

computedCount:(state)=>{

return statecount2

});

页面使用：this$storegetterscomputedCount

action

action类似于mutation，不同在于，

action 提交的事mutation，而不是直接改变状态（也就是state里面的值）。

action 可以包含任意异步 *** 作

var actions={

acctionsincCount:(context)=>{

contextcommit('incCount');

});

页面使用：this$storedispatch()

用vue那么久，你清楚vue全家桶都有谁不？

构建工具vue-cli，路由vue-router，状态管理vuex， >

Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

如果一份数据需要在多个组件中使用，组件间传值又比较复杂，就可以使用vuex托管数据。

state选项： 定义状态（状态就是数据）。

mutations选项： 定义修改状态的方法（注意：这里面只能定义同步方法）。

$store： 返回的是当前项目中的全局状态对象。

commit()方法： 用于执行指定的mutations里面的方法。

在组件中，直接通过$storestate就可以获取到全局状态对象管理的状态数据，直接渲染到页面。

state选项： 定义状态（状态就是数据）。

通过 $storestate数据名 使用。

getters选项： 定义计算属性。方法的参数是状态对象。

通过 $storegetters属性名 使用计算属性。

mutations选项： 定义修改状态的方法（注意：这里的方法一般都是同步方法）。方法的第一个参数是状态对象，第二个参数是新值。

通过 commit() 方法，调用mutations里面的方法。

actions选项： 定义 *** 作状态的方法（这里的方法可以定义异步方法）。

注意： actions里的方法最好不要直接 *** 作state状态，而是通过调用mutations里面的方法去修改状态。所以，actions直接 *** 作的是mutations。

通过 dispatch() 方法，调用actions里面定义的方法。

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

namespaced属性： 默认情况下，action、mutation 和 getter 是注册在全局命名空间的。通过设置namespaced属性为true，将action、mutation 和 getter全部注册到私有命名空间中。

要从私有模块中获取数据，方式是： $storestate模块名称模块的数据 。

要从私有模块中获取计算属性，方式是： $storegetters['模块名/计算属性'] 。

调用私有模块里面的mutations定义的方法，方式是： $storecommit('模块名/方法名',新值) 。

调用私有模块里面的actions定义的方法，方式是： $storedispatch('模块名/方法名',新值) 。

直接在模板中使用全局状态管理数据，表达式会写的很长。所以可以使用计算属性。

通过映射函数mapState、mapGetters、mapActions、mapMutations，可以将vuexstore中的属性映射到vue实例身上，这样在vue实例中就能访问vuexstore中的属性了，便于 *** 作vuexstore。

如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapState 映射函数，自动生成页面中的计算属性。

如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapGetters 映射函数，自动生成页面中的计算属性。

注意： 如果要映射模块里面的state/getters，函数的第一个参数设置为模块的名称。

如果定义的方法名跟全局管理对象中mutations里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapMutations 映射函数生成方法。

如果定义的方法名跟全局管理对象中actions里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapActions 映射函数生成方法。

注意： 如果要映射私有模块中mutations/actions里面的方法，函数的第一个参数设置为模块的名称。

以上就是关于vue 简单版状态机（vuex）全部的内容，包括:vue 简单版状态机（vuex）、vuex的五个属性是什么、说说你对vuex的理解等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！