vuex使用，使用场景

Posted 2023-03-17

参考技术A 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 文件夹里面新建一个store.js

3、安装vuex 

cnpm install vuex --save

4、在刚才创建的store.js引入vue  引入vuex 并且use vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

5、定义数据

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

var state=

    count:1



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

var mutations=

    incCount()

++state.count;

   



暴露

const store = new Vuex.Store(

    state,

    mutations,

getters

)

export default store;

组建里面的使用

1.引入 store

import store from '../vuex/store.js';

2、注册

export default

data()

    return              

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

value1: null,

   

,

store,

methods:

    incCount()

this.$store.commit('incCount');  /*触发 state里面的数据*/

   



   

3、获取state里面的数据

this.$store.state.数据

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

this.$store.commit('incCount');

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

var getters=

computedCount:(state)=>

return state.count*2

);

页面使用：this.$store.getters.computedCount

action

action类似于mutation，不同在于，

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

action 可以包含任意异步操作

var actions=

acctionsincCount:(context)=>

context.commit('incCount');

);

页面使用：this.$store.dispatch()