VUEX:

vuex的出现是为了组件传值
子传父&＃xff0c;父传子&＃xff0c;跨组件通信

Vuex   状态共享框架

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

采用集中式管理组件依赖的共享数据的一个工具&＃xff0c;可以解决不用组件数据共享的问题

state   存储共享状态数据的地方&＃xff0c;
mutaitions    唯一能修改数据的地方&＃xff0c;
actions     异步修改数据的地方&＃xff0c;
getters 快速获取数据的地方

修改state必须通过mutations
mutaitions只能执行同步代码&＃xff0c;类似ajax&＃xff0c;定时器之类的代码不能在mutaitions中执行
actions执行异步操作&＃xff0c;数据提交给mutaitions进行修改
state的状态即共享数据可以再组件中引用
组件调用actions

初始化vuex

vue create vuex_demo
yarn add vuex&＃64;3.6.2  或  npm i vuex&＃64;3.6.2

在main.js中进行引入&＃xff0c;注册&＃xff0c;实例化&＃xff0c;挂载使用
import Vuex from &＃39;vuex&＃39;
Vue.use(Vuex)
const store &＃61; new Vuex.store()
new Vue({
  ...
  store
})

state 是一个对象形式&＃xff0c;里面就是存储的状态

const store &＃61; new Vuex.Store({
state: {
count:0
}
})

原始形式引入&＃xff1a;插值表达式  {{ $store.state.count }}
辅助函数&＃xff1a;...mapState
impot {mapState} from &＃39;&＃39;vuex
在计算属性中使用
computed:{
count(){ reyurn this.$store.state.count } ,
...mapState([&＃39; count &＃39;])
}

mutaitions 也是对象形式&＃xff0c;唯一能修改state数据的地方
每一个mutaitions方法都有对应的参数
参数1&＃xff1a;state--当前vuex中的state对象
参数2&＃xff1a;payload--载荷&＃xff0c;提交mutaitions的方的时候&＃xff0c;传递的参数可以是任何形式的&＃xff0c;任何类型的值

未传值
mutations: {
    addCount(state) {
      state.count &＃43;&＃61; 1
    }
  }
调用
原始形式&＃xff1a;

methods: {
        test() {
            this.$store.commit("addCount")
        },
    },

传值
mutations: {
    addCount(state,payload) {
      state.count &＃43;&＃61; payload
    }
  }
调用
原始形式&＃xff1a;
methods: {
        test() {
            this.$store.commit("addCount",1)
        },
    },

事件参数对象&＃xff1a;$event

辅助函数&＃xff1a;...mapMutaitions
import { mapMutations } from &＃39;vuex&＃39;
...mapMutations([&＃39;addCount&＃39;])
辅助 &＃43;10

actions 异步更新state
参数1&＃xff1a;context执行的上下文对象&＃xff0c;相当于组件中的this.$store &＃xff0c;store的运行实例

this.$store.dispatch(&＃39;getAsyncCount&＃39;)
this.$store.dispatch(&＃39;getAsyncCount&＃39;&＃xff0c;123)
...mapActions([&＃39; getAsyncCount &＃39;])

getters 快速获取数据的地方
除了state之外&＃xff0c;有时我们还需要从state中派生出一些状态&＃xff0c;这些状态是依赖state的&＃xff0c;此时会用到getters
state中定义了list&＃xff0c;为1-10的数组

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}

组件中&＃xff0c;需要显示所有大于5的数据&＃xff0c;正常的方式&＃xff0c;是需要list在组件中进行再一步的处理&＃xff0c;但是getters可以帮助我们实现它
**定义getters**

getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state &＃61;>  state.list.filter(item &＃61;> item > 5)
  }

**原始方式** -$store

这句话的意思是&＃xff0c;如果把所有的状态都放在state中&＃xff0c;当项目变得越来越大的时候&＃xff0c;Vuex会变得越来越难以维护

由此&＃xff0c;又有了Vuex的模块化

模块化就是把一个大的vue组件&＃xff0c;拆成n个小组件。

### 模块化的简单应用

**应用**

定义两个模块   **user** 和  **setting**

user中管理用户的状态  token 

setting中管理 应用的名称 name

命名控件&＃xff1a;namespaced
默认情况下&＃xff0c;模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

这句话的意思是 刚才的user模块还是setting模块&＃xff0c;它的 action、mutation 和 getter 其实并没有区分&＃xff0c;都可以直接通过全局的方式调用

> 但是&＃xff0c;如果我们想保证内部模块的高封闭性&＃xff0c;我们可以采用namespaced来进行设置

高封闭性&＃xff1f;可以理解成 **一家人如果分家了&＃xff0c;此时&＃xff0c;你的爸妈可以随意的进出分给你的小家&＃xff0c;你觉得自己没什么隐私了&＃xff0c;我们可以给自己的房门加一道锁&＃xff08;命名空间 namespaced&＃xff09;,你的父母再也不能进出你的小家了**