VUEX:

vuex的出现是为了组件传值
子传父，父传子，跨组件通信

Vuex   状态共享框架

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

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

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

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

初始化vuex

vue create vuex_demo
yarn add vuex@3.6.2  或  npm i vuex@3.6.2

在main.js中进行引入，注册，实例化，挂载使用
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store()
new Vue({
  ...
  store
})

state 是一个对象形式，里面就是存储的状态

const store = new Vuex.Store({
state: {
count:0
}
})

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

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

未传值
mutations: {
    addCount(state) {
      state.count += 1
    }
  }
调用
原始形式：

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

传值
mutations: {
    addCount(state,payload) {
      state.count += payload
    }
  }
调用
原始形式：
methods: {
        test() {
            this.$store.commit("addCount",1)
        },
    },

事件参数对象：$event

辅助函数：...mapMutaitions
import { mapMutations } from 'vuex'
...mapMutations(['addCount'])
<button @click="addCount(10)">辅助 +10</button>

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

this.$store.dispatch('getAsyncCount')
this.$store.dispatch('getAsyncCount'，123)
...mapActions([' getAsyncCount '])

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

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

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

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

**原始方式** -$store
<div>{{ $store.getters.filterList }}</div>
**辅助函数** - mapGetters
 ...mapGetters(['filterList'])

vuex中的模块化--module
为什么会有模块化：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

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

由此，又有了Vuex的模块化

模块化就是把一个大的vue组件，拆成n个小组件。

### 模块化的简单应用

**应用**

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

user中管理用户的状态  token 

setting中管理 应用的名称 name

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

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

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

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