vuex的属性和基本用法

2021-05-13 19:31:14 阅读：177 来源： 互联网

标签：Vuex mutations 用法 state mutation commit vuex store 属性

vuex的属性和基本用法

在这里插入图片描述

Vuex是什么？

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态，(可以理解为VUE组件里的某些data）。
Vue有五个核心概念，state, getters, mutations, actions, modules。

state:state是一个全局的状态存储，数据会存储在其中，Vue组件可以直接访问其中的值，但是只可以读，不可以进行写操作
getter 有些时候我们需要对获取的数据进行加工，获取数据的一部分或者某些属性，而不是直接获取state中的数据，这时候可以通过getter定义函数，返回对应的数据
mutations是vuex中唯一一个可以修改数据的地方，mutations可以定义事件函数，在vue组件中，可以通过commit发射事件，调用函数。需要注意的是，mutations中的操作必须是同步的，不可以存在异步操作的情况
actions和mutation比较相似，不同的是actions中不直接修改state，而是通过commit调用mutations修改数据，而且actions中可以存在异步处理逻辑

安装

NPM安装

终端中输入：

npm install vuex

在 src 下新建文件夹 store，进入 store新建 index.js,
在index.js中添加代码以下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

一、store

安装 Vuex 以后，让咱们来建立一个 store。仅须要提供一个 state 对象和一些 mutations

import Vue  from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})

现在你就可以通过store.state来获取状态对象，以及通过在这store.commit方法进行变动：

store.commit('increment') 
console.log(store.state.count) // -> 1

二、mutations

在vue文件中添加代码，添加一个点击事件

<button @click="jian">-</button>
{{$store.state.count}}
<button @click="add">+</button>

在<script>中添加方法（methods与data同级）

add(){
     this.$store.commit('increment')
},
jian(){
	 this.$store.commit('outcrement')
}

再回到index.js的mutations中添加

  increment(state){
     state.count++
},
 outcrement(state){
     state.count--
        },

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

mutation回调函数的第一个参数始终为store，你能够向 store.commit 传入额外的参数，即 mutation 的载荷，在大多数状况下，载荷应该是一个对象，这样能够包含多个字段而且记录的 mutation 会更易读

mutations: {
  increment (state, payload) {
    state.count = payload.amount
  }
}

三、actions

action 相似于 mutation，不一样在于：
action 提交的是 mutation，而不是直接变动状态。
action 能够包含异步操作。

 mutations:{
        updatakey(state,val){
          state.key=val;
        }
    },
actions:{
    updatakey(state,val){
      setTimeout(()=>{
        state.commit('updatakey',val)
      },10)
    }
  },

四、getters

getters：【getters】是store的计算属性

getters:{
        getShopCar(state){
            var sum = 0
            console.log(state.shopCar);
            for(var i=0; i<state.shopCar.length; i++){
                sum+=state.shopCar[i]
            }
            return sum
        }
    }

五、modules

modules => 模块化Vuex（将store分割成不同的模块）
把user.js文件放在跟index同一个文件夹中，
再把user引入到index中

index代码

import user from './user.js'
modules:{
    user
  },

user代码

export default  {
    state:{
        usermode:{
        }
    },
    mutations:{
        mylogin(state,val){
            state.usermodel=val
            // console.log($store.state.user.usermodel)
        }
    },
}

标签：Vuex,mutations,用法,state,mutation,commit,vuex,store,属性
来源： https://blog.csdn.net/weixin_57090645/article/details/116757540

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vuex的属性和基本用法