欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuex

程序员文章站 2024-02-28 13:25:04
...

Vuex是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想,就是前面所说的单向数据流。下图就是Vuex实现单向数据流的示意图。

vuex

Vuex状态管理跟使用传统全局变量的不同之处

1.Vuex的状态存储是响应式的:就是当你的组件使用到了这个Vuex的状态,一旦它改变了,所有关联的组件都会自动更新相对应的数据,这样开发者省事很多。

2.不能直接修改Vuex的状态:如果是个全局对象变量,要修改很容易,但是在Vuex中不能这样做,想修改就得使用Vuex提供的唯一途径:显示地提交(commint)mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化,在开发过程中调试的时候,非常实用。

使用步骤

1 .安装Vuex

npm install vuex --save

2 . 引用vuex,创建仓库store。 创建 store.js

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

//数据
const state={
    count:10
}
//action  执行异步操作,不可以修改state数据
const actions={
    getParamSync (context,Object) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation
            context.commit('increment',Object)
        },3000)
    }
}
//mutation 可直接修改state数据
const mutations={
    increment(state,value){
        state.count += value;
    },
    decrement(state,value){
        state.count -=value;
    }
}
//getter 
const getters = {
    newCount:state => state.count * 3
}
 
export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
})


3 . 在 main.js中注册到根组件中

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

action

action:
用来解决异步流程来改变state数据。
而matution是直接进行同步操作的,如果你在mutations里进行异步操作,你会发现没用,并不会起任何效果
只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下:

export default new Vuex.Store({
  //存放数据
  state: {
    count: 5, 
  },
  //2.接受dispatch传递过来的方法和参数
  actions: {
    getParamSync (context,val) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation
            context.commit('increment',val)
        },3000)
    }
  }
})

vue组件中通过事件触发action


methods: {
   getVal() {
	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
	  this.$store.dispatch('getParamSync',1)
   }
 }

Mutations:

Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation

我们在 mutations中定义了一个叫increment的函数,函数体就是我们要进行更改的地方

会接受 state作为第一个参数,第二个是自定义传参

 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数:5
    },
    mutations:{
        increment(state,value){
            state.count += value;
        }
    }
 });

我们在提交commit时候,字符串参数increment,就是对应在 mutations中的increment。
一般通过方法或钩子触发,例如:

 methods: {
   getVal(event) {
     //获取当前的按键的值
     let value = event.target.dataset.value;
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", value);
   }
 }

在组件中获取{{count}}方式:

export default {
  computed: {
      count(){
          return this.$store.state.count;
      }
  }
};  

1.increment官方说是type,其实就是注册的事件名
2.可以是单个参数
3.如果是多个参数,我们则用对象放入,否则会报错

Getters

可以认为,getters 是store的计算属性,类似于computed,对state里的数据进行一些过滤,改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来,就适合使用我们的 getters

getters 接受 state 作为其第一个参数

 const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数:5
   },
   getters:{
      newCount:state => state.count * 3
   }
 });

在组件中获取{{newCount}}方式:

export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};  

组件中触发action、mutation

 methods:{
     jia(){
         console.log(this.$store)
        this.$store.commit("increment", 1);
     },
     jian(){
         this.$store.commit('decrement',1)
     },
     twojia(){
         this.$store.dispatch('getParamSync',1)
     }
  },
相关标签: vue