vue随笔_vuex

介绍

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

安装

npm

npm install vuex@next --save

yarn

yarn add vuex@next --save

在脚手架 创建项目时勾选vuex的选项系统会自动创建

核心概念

State

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

 在vuex中state中定义数据，可以在任何组件中进行调用

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    name:"张三",
    age:12,
    count:0
  },
})

 调用：

方法一： 在标签中直接使用

<p>{{$store.state.name}}</p>

 方法二：

this.$store.state.全局数据名称 

方法三：

从vuex中按需导入mapstate函数

import { mapState } from "vuex";

注意：当前组件需要的全局数据，映射为当前组件computed属性

computed:{
	...mapState(["name","age","sex"])
}

直接使用

<p>{{$store.state.name}}</p>
<p>辅助函数{{name + age + sex}}</p>

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

在vuex中定义：

其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一

state:{
    name:"张三"，
    age:"12"，
    count:"0
},
mutations:{
    addcount(state,num){
        state.count += num
    }
    reduce(){
    	state.count--
	}
}

在组件中使用：

 定义两个按钮进行加减操作

<button @click="btn">增加</button>
<button @click="btn1">减少</button>

 方法一：

注意：使用commit触发Mutation操作

methods:{
//加法
btn(){
	this.$store.commit("addcount",10)     //每次加十
}
//减法
btn1(){
	this.$store.commit("reduce") 
}
}

方法二：

使用辅助函数进行操作，具体方法同上

methods:{
    ...mapMutations(["addcount","reduce"]),
    btn(){
        this.addcount(10)
    },
    btn1(){
        this.reduce()
    },
}

Action ——进行异步操作

Action和Mutation相似，一般不用Mutation 异步操作，若要进行异步操作，使用Action

原因：为了方便devtools打个快照存下来，方便管理维护。所以说这个只是规范，而不是逻辑的不允许，只是为了让这个工具能够追踪数据变化而已

在vuex中定义：

将上面的减法操作改为异步操作

//操作异步操作mutation
action:{
    asyncAdd(context){
        //异步
        setTimeout(()=>{
            context.commit("reduce")
        },1000)
    }
}

 在组件中使用：

方法一：

直接使用 dispatch触发Action函数

this.$store.dispatch("asynAdd")

方法二：

使用辅助函数

...mapActions(["asyncAdd"]),
btn2(){
    this.asyncAdd()
}

Getter

类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

具体操作类似于前几种，这里不做具体说明

Modules

当遇见大型项目时，数据量大，store就会显得很臃肿

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

modules:{
    cityModules:{
        namespaced:true,
        state:{
            cityname:"中国"，
        }，
        mutations:{
            cityfuncion(state){
                state.cityname = "中华人民共和国"
            }
        }
    }，
    userinfo:{
       state:{
            useryname:"小明"，
        }， 
    }
}

 默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

btn3(){
    console.log(this.$store.state.cityModules.cityname);
}

如何在组件中监听vuex数据变化

vuex
state: {
    listData:''
  },
  mutations: {
    listData:function(state, value){
      state.listData = value
    },
  },


需要监听的vue位置
computed: {
    listData() {
      return this.$store.state.listData;
    }
  },
  //监听执行
  watch: {
    listData(val) {
     写上你需要的东西
    }
  },

其他vue改变  监听的值时
this.$store.commit("listData", {
        listData: 3,
      });


this.$store.state.listData  为获取方法

this.$store  vuex注册为全局时 可以这样调用