1.概念和作用解析

vuex是为vue.js创建的应用程序的状态管理模**式。**

1.状态管理模式

7.png
响应式管理几个组件的公用变量

2.管理什么状态

8.png

3.基本使用

1.安装模块

  1. npm install vuex

2.注册插件

9.png
vue相当于一个大管家一样，当中的数据可以实现共享

10.png
devtools是vue在浏览器插件，多个界面同时改变某一个状态，很难跟踪到到底是哪个页面改变这一状态，而devtool插件可以记录每一次改变状态的页面,只要是修改state，就一定通过mutation去改

在修改state时有异步操作一般放在actions来操作，例如文件读写，进行一些网络请求等，mutation中一般只进行同步操作

4.vuex-devtools插件（浏览器）

  1. 下载插件
    https://github.com/vuejs/vue-devtools

11.png
2.找到vue-devtools对应目录

解决方案及安装步骤
34.png

  1. 第一步（就是这个解决方案）：输入  npm i -g npm
  1. 第二步（按正常安装）：输入  npm install
  1. 第三步：输入  npm run build

5.state与mutations

1.state

aa.png

此时这里的count是一个公共状态，在所有的模板中都可以使用

在其他模块中用$store.state.count引入这个公共的count

bb.png

2.mutations


在修改state时，一定是通过修改mutations从而改变state

cc.png
这里通过两个函数，分别对状态count进行操作，在模板中需要引进这两个方法。
dd.png
ee.png
mutations中的方法通过this.$store.commit(“mutations中的方法”)来调用的

6.vuex核心概念

1.State单一状态树

state保存共享状态
State单一状态树是一种单一数据源。
100.png
一个项目只会建立一个store

2.Getters

类似计算属性，对state做一些处理，然后可以共享给每一个组件，如果某一个组件需要的值跟共享的值有出入，也可以修改。
101.png

102.png

Getters作为参数

拿到工资大于33的个数
103.png
输入价格大于sal的，sal是传入的一个参数
这里可以让getters中的函数返回值为一个函数，在函数中传入参数sal
104.png
105.png

3.Mutations

包含两个部分：字符串的事件类型;一个回调函数，回调函数的第一个参数就是state。
在mutation中可以改变state，通过定义不同的方法来改变，
r.png
s.png
定义的方法中第一个参数是state,第二个参数可以由我们自己定义，

1.Payload

在组件中
t.png
使用
u.png
在Mutation定义的方法：在组件中通过commint可以提交一些数据给Mutation的方法中，进行操作，从而改变state

在组件中
v.png
在mutations中
w.png

2.Mutations响应式规则

rr.png
ss.png

3.对象属性添加方法（响应式）：


上式中info添加了adress属性，但是页面是不会刷新的，因为它不在响应式系统中，可以用下面的方式

数组：
tt.png
对象：
uu.png

4.对象属性删除方法（响应式）：


删除对象上age属性
50.png

51.png

5.类型常量

52.png

导入
53.png
导入之后就可以使用常量了

这样写避免书写错误
54.png

4.Action

在mutation中进行异步操作时，vue-detool插件中的数据不会发生变化，因此会造成vue-tool在后面的操作中无法在调试程序

a.png
如果有异步操作，用action代替mutation
1.在action中提交到mutation，这里的context相当于store
b.png
2.在mutation中修改state中的info
c.png

3.在组件内部需要传入到action中，使用dispatch方法

d.png
e.png

5.Moudle


vue使用单一状态树，那么也意味着很多状态都会交给vuex来管理。当应用变得非常复杂时就需要moudle的辅助了。
moudle里面也有四个模块：state,nutations,getters,actions
1.首先得在主模块中注册一个moudle

  1.  modules: {
  3.   a:moduleA
  5.  },


2.在vuex.store外面定义一个moduleA对象，里面包含state,nutations,getters,actions

  1. const moduleA={
  3.  state:{
  5.   name:"杨杨"
  7.  },
  9.  getters:{},
  11.  mutations:{},
  13.  action:{}
  15. }


3.在state里面进行的操作

  1.  state:{
  3.   name:"杨杨"
  5.  },
  7.  在app组件中可以这样获取到name属性值
  8.  <h2>{{$store.state.a.name}}</h2>


4.在modules里面这样操作

首先定义一个可以修改state里面属性的方法

  1.  mutations:{
  3.   exchange(state){
  5.    state.name="王苏"
  7.   }


然后在app的模块method中

  1.  exchange(){
  3.     this.$store.commit("exchange")
  5.    }


这种方式是commit之后会在主vue.store的mutations中去寻找，如果没有找到就会去moudule的mutation中去找。

5.在getters中可以这样去操作

  1. getters:{
  3.   addname(state){
  5.    return state.name+",你好呀"
  7.   },
  9.   //第一个参数state可以拿到state中的值，通过getters可以拿到addname中的返回值
  11.   addname1(state,getters){
  13.    return getters.addname+"我确实不错"
  15.   }


在app.vue中，这里与上面的mutations里面类似，先去主vuex.store中的getters去寻找addname方法，如果没找到就会去module的getters中去寻找addname

  1.  <h2>moduleA模块:{{$store.getters.addname}}</h2>
  3.   <h2>修改过的moduleA模块:{{$store.getters.addname1}}</h2>


6.在actions中可以这么操作
actions中第一个参数是context（上下文）
//actions通过mutations里面的事件函数来改变state里面所定义的属性值

  1.  mutations:{
  3.   exchange(state,pload){
  5.    state.name=pload
  7.   },
  9.  },
  11.  actions:{
  13.   //actions中第一个参数是context（上下文）
  14.  asyncSetname1(context){
  16.   setTimeout(() => {//异步操作，所以放在actions中
  18.  //这里的王兄名就是传递到exchange事件中的参数，也就是上面的那个pload
  19.   context.commit('exchange',"王兄名")
  20.   }, 1000);
  22.  }
  24.  }


在app.vue 中action需要这样操作
1.首先在methods中需要定义一个方法来获取module A中action的值，这里使用dispatch方式，后面的参数是actions中对应的方法名。

  1.  asyncSetname1(){
  3.     this.$store.dispatch("asyncSetname1")
  5.    }

2.在组件的模板中

  1.    <h2>{{$store.state.a.name}}</h2>
  3.       <h2>moduleA模块:{{$store.getters.addname}}</h2>
  5.       <h2>修改过的moduleA模块:{{$store.getters.addname1}}</h2>
  7.      <button @click="exchange">moduleA模块</button>
  9.   //点击这一行名字都会改变，因为vue的响应式
  11.      <button @click="asyncSetname1">异步修改名字</button>

第一个参数context,上下文，相当于store，里面有一个commit方法，一个dispatch方法，一般在app.vue组件内进行使用。

7.总结

state里面的数据拿到组件中需要通过$store.state.(state里面的值)

  1. <h1>{{$store.state.count}}</h1>

getters里面的数据拿到组件中需要通过$store.getters(getters里面的值)，这里可以带一个参数返回到getters中

  1. <h4>{{$store.getters.filters}}</h4>

在gettersl里面第一个参数一般是state，通过state.(state里面的数据)对state里面的数据进行修改

  1. getters:{
  3.   filtersGetter(state,getters){
  5.     return getters.filters.length
  7.   },
  9.   }

在getters中第二个参数要是getters,那么这个getters就相当于上一次getter的方法

  1.  filters(state){
  3.   return state.books.filter(item=>item.sal>=33)
  5.   },
  7.   filtersGetter(state,getters){
  9.     return getters.filters.length
  11.   },

在mutation中，此时可以直接操作state，通过state.(state里面的数据)

  1. mutations: {
  2.     increment(state){
  3.       state.count++
  4.     },
  5.     decrement(state){
  6.       state.count--
  7.     },
  8.     increment1(state,counter){
  9.      state.count+=counter
  10.     },
  11.     addbooks(state,book1){
  12.      state.books.push(book1)
  13.     },    
  15. add(state){
  16.   Vue.set(state.car,"height",30)
  17. },
  18. delete(state){
  19.   Vue.delete(state.car,"height")
  20. },
  21. changename1(state){
  22.   state.info.name="哇NGSU"
  23. }   
  24.   },

通过 this.
vueX - 图40

在action中，一般进行一些异步操作，首先需要从mutation中拿到可以改变state的函数

  1.  context.commit("changename1",paload)


actions里面的方法第一个参数是context，这里的context相当于method，然后可以得到mutations的方法

这里也可以带第二个参数，这个参数是组件中的一些数据，例如下面的“我是paload”

  1.  this.$store.dispatch("changename","我是paload")


因为是异步操作，可以放在一个Promise容器中

  1.  actions: {
  3.   changename(context,pload){
  5.    return new Promise((resolve,reject)=>{
  7.    setTimeout(()=>{
  9.     resolve()
  11.      },2000)
  13.    })
  15.   },

在组件中

  1. this.$store.dispatch("changename","我是paload").then(()=>{
  3.     console.log("这是一个resove回调")
  5.    })

首先这里去获取actions中的方法，不跟getters和mutation中用commit,改为dispatch,这里changename返回的是一个Promise，因此可以使用它的then方法，中的回调在给作为参数给actions传过去.

8.vuex的目录结构

如果放在一个文件中会显得很凌乱，因此需要做抽取
14.png