vuex的属性和基本用法

2024-03-17 14:16:34

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)
        }
    },
}

码农公寓