vuex简单了解一下

一、vuex是什么？

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

　　简单来说：vuex就是把需要共享的变量全部存储在一个对象中，然后将这个对象放在顶层组件中供给其他组件使用。vue比作js文件，组件是函数，vuex是全局变量，只是vuex包含了一些特定的规则而已。

二、vuex的五个基本对象是什么？

 

const store = new Vuex.Store({
 state: {
 name: 'weish',
 age: 22
 },
 getters: {
 personInfo(state) {
 return `My name is ${state.name}, I am ${state.age}`;
 }
 }
 mutations: {
 SET_AGE(state, age) {
 commit(age, age);
 }
 },
 actions: {
 nameAsyn({commit}) {
 setTimeout(() => {
 commit('SET_AGE', 18);
 }, 1000);
 }
 },
 modules: {
 a: modulesA
 }
}

 

　　state：　　   存储状态，也是变量；

　　getter：　　对state里面的属性进行计算，访问vuex中的属性都需要getter获取。getter需要单独成一个文件

　　　　　　　　外部调用方式：store.getters.personInfo()。

　  mutations：  提交状态修改。是唯一修改state的方式，但不支持异步操作。

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

　　Action：　　提交的是mutation，而不是直接改变状态；

　　　　　　　　action可以包含异步操作

　　　　　　　　外部调用方式：store.dispatch('nameAsyn')。

　　modules：　 stote的子模块，内容相当于store的一个实例。

　　　　　　　  　外部调用方式：store.a.getters.xxx()。

　　异步:dispatch一个action，commit一个mutation

state

state:{
  userViews:[],
}

mutations

ADD_USERID(state,name){
 if (state.userViews.some(v => v.name=== name.fullName)) return
      state.userViews.push(name)
}

 

actions

addUserid({commit},name){
  return new Promise((resolve,reject)=>{
  commit ('ADD_USERID',name)
  resolve("success")
})
}

getters.js

 

let getters = {
  userViews: state => state.app(*state.action等所在的文件夹名称*).userViews,
}
export default getters

 

在页面中引用各个模块

state

第一种方式：<h3>当前最新的count是：{{this.$store.state.count}}</h3>}

第二种方式：对象展开运算符

import { mapState  } from 'vuex'
computed:{
    ...mapState(['subCount']),
},
页面中:
<h3>当前最新的subCount是：{{subCount}}</h3>

mutations

第一种方式：

import { mapMutations } from 'vuex'
methods:{
        ...mapMutations(['sub','subN']),
}
页面：
<button @click="sub">-1</button>
<button @click="subN(3)">-N</button>

第二种方式：组件中使用 this.$store.commit('xxx')

<button @click="handelAdd">+1</button>
<button @click="handelAdd1">+N</button>
methods:{
handelAdd(){
    this.$store.commit('add')
},
handelAdd1(){
    this.$store.commit('addN',3)
},
}

actions

第一种方式：

import {  mapActions } from 'vuex'
methods:{
     ...mapActions(['subAsyns','subNAsyns']),
}
页面：
<button @click="subAsyns">-1 Asyns</button>
<button @click="subNAsyns(3)">-N Asyns</button>

第二种方式：

<button @click="handelAdd2">+1 Async</button>
<button @click="handelAdd3">+N Async</button>
methods:{
handelAdd2(){
// dispatch来触发actions里面某个函数
this.$store.dispatch('addAsync')
},
handelAdd3(){
this.$store.dispatch('addNAsync',3)
}
}

getters

第一种方式：

import {mapGetters } from 'vuex'
computed:{
    ...mapGetters(['show2Num'])
},

页面：
<h1>{{show2Num}}</h1>