218、VUEX

注意：前端单页面应用，就是把状态和路由连起来
import Vue from ‘vue‘
import router from ‘./router‘
import store from ‘./store‘
import ‘@/permission‘//router.beforeEach
new Vue({
  el: ‘#app‘,
  router,
  store,
  render: h => h(App)
})

mutation：突变，改变
注意：从定义和使用两个方面来理解VUEX
一、VUEX简介
1、redux 处理同步用 dispatch action（对象类型），处理异步用 dispatch action（函数类型）
2、Vuex 处理同步用 commit mutations ，处理异步用 dispatch action commit mutations
3、Vuex 的 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象

二、模块（默认）
注意：Vuex允许我们将 store 分割成 module，每个模块拥有自己的 state、mutation、action、getter、module。
1、mutation 的第一个参数是局部状态对象。
2、action 会收到 局部参数 和 rootState。
3、getter 会收到 state、getters 和 rootState。
4、mutation、action 和 getter 是（通过递归）注册在全局命名空间的。
5、在模块里，通过 commit(mutation) 或者 dispatch(action)执行。

三、模块（命名空间）
注意：添加 namespaced: true 的方式使其成为带命名空间的模块。mutation、action 和 getter 会自动调整命名。
1、mutation 的第一个参数是局部状态对象。
2、action 会收到 局部参数 和 rootState、rootGetters。
3、getter 会收到 state、getters 和 rootState、rootGetters 4个参数。
4、mutation、action 和 getter 是注册在局部命名空间的。
5、在模块里，通过 commit(mutation)、dispatch(action) 或者 commit(‘someAction‘, null, { root: true })、dispatch(‘someAction‘, null, { root: true })执行。通过给 action 添加 root: true 和 handler ，就可以在本命名空间注册全局 action ，在全局命名空间 dispatch 。

四、this.$store与store的区别
1、在".vue"组件里，通过 this.$store.commit(mutation) 或者 this.$store.dispatch(action) 执行。
2、在"store.js"文件里，可以通过 { getter: { count: (state, getters) => { /* return getters.count.length */ } } }执行。
2、在其它".js"文件里，可以通过 store.commit(mutation) 或者 store.dispatch(action) 执行。

五、Vuex
1、Vuex实例配置：
(1)state
(2)mutations(state)//在store上注册mutation，处理函数总是接受state作为第一个参数
(3)actions(context)//与store实例具有相同方法和属性的context对象
(4)getters(state,getters)
(5)modules
(6)plugins
(7)strict
(8)devtools
2、实例获取：new Vuex.Store({})
3、实例的属性和方法
(1)实例属性：state、getters
(2)实例方法：commit、dispatch、replaceState、watch、subscribe、subscribeAction、registerModule、unregisterModule、hotUpdate
(3)供给组件的辅助函数：mapState、mapGetters、mapActions、mapMutations、createNamespacedHelpers，通过import { XXX } from ‘vuex‘

4、store 实例
const store = new Vuex.Store({
  state: {
    count: 0,
    todos: [
      { id: 1, text: ‘11111‘, done: true },
      { id: 2, text: ‘11111‘, done: true },
      { id: 3, text: ‘11111‘, done: false }
    ]
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    }
  },
  actions: {
    Login({commit}, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        login(username, userInfo.password, userInfo.code).then(response => {
          commit(‘SET_TOKEN‘, ‘5663DC3C8A12FFD684E9A8FC29984212‘)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    }
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {  
      //return getters.doneTodos.length 
    },
    getTodoById: (state) => (id) => {
      //store.getters.getTodoById(2) 或 this.$store.getters.getTodoById(2)
      return state.todos.find(todo => todo.id === id)
    }
  },
  modules: {
    app,
    user,
    permission
  }
})
const store = new Vuex.Store({
  modules: {
    app,
    user,
    permission
  },
  getters
})

5、mapState：将store中的state映射到局部计算属性：
<p>
　　mapState方式 {{count}}
</p>
computed: {
  ...mapState([
    ‘count‘//映射this.count为store.state.count。当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
  ]),
}
//上面将 mapState 的每一项作为 computed 对象的每一项，
//下面用 mapState 的整体来取代 computed 对象的整体，
computed: mapState({
  count: state => state.count,// 箭头函数可使代码更简练
  countAlias: ‘count‘,// 传字符串参数 ‘count‘ 等同于 `state => state.count`
  countPlusLocalState (state) {
    return state.count + this.localCount// 为了能够使用 `this` 获取局部状态，必须使用常规函数
  }
})

6、mapMutations：将组件中的 methods 映射为 store.commit 调用，代替使用 this.$store.commit(‘xxx‘) 提交 mutation，
export default {
  methods: {
    ...mapMutations([
      ‘increment‘, // 将 `this.increment()` 映射为 `this.$store.commit(‘increment‘)`
      ‘incrementBy‘ // `mapMutations` 也支持载荷：将 `this.incrementBy(amount)` 映射为 `this.$store.commit(‘incrementBy‘, amount)`
    ]),
    ...mapMutations({
      add: ‘increment‘ // 将 `this.add()` 映射为 `this.$store.commit(‘increment‘)`
    })
  }
}

7、mapActions：将组件中的 methods 映射为 store.dispatch 调用，代替使用 this.$store.dispatch(‘xxx‘) 分发 action，
export default {
  methods: {
    ...mapActions([
      ‘increment‘, // 将 `this.increment()` 映射为 `this.$store.dispatch(‘increment‘)`
      ‘incrementBy‘ // `mapActions` 也支持载荷：将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch(‘incrementBy‘, amount)`
    ]),
    ...mapActions({
      add: ‘increment‘ // 将 `this.add()` 映射为 `this.$store.dispatch(‘increment‘)`
    })
  }
}

8、mapGetters：将store中的getter映射到局部计算属性
<template>
  <div>
    <h4>测试1：Count is {{ count }}</h4>
    <P>通过属性访问：{{ doneTodosCount }}</p>
    <P>通过方法访问：{{ doneTodos }}</p>
  </div>
</template>
<script>
import { mapGetters } from ‘vuex‘
export default {
  computed:{
    count(){
      return this.$store.state.count
    },
    ...mapGetters([// 使用对象展开运算符将 getter 混入 computed 对象中
      ‘doneTodos‘,
      ‘doneTodosCount‘
    ]),
    ...mapGetters({// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: ‘doneTodosCount‘
    })
  }
}
</script>