1、vuex 是什么？

集中式存储管理应用的所有组件的状态（单独出来管理共用的状态，如：token的管理等，相当于一个全局对象），以相应的规则保证状态以一种可预测的方式发生变化（不能直接修改数据，需要通过特定的方法， this. store.commit() ），无法持久化存储。

vuex 和 Cookie，localstorage 的区别

Cookie： 采用键值对的方式存储（ document.cookie = 键= 值； 键= 值），可以定义过期时间(document.cookie ="expires=有效期")，存储大小4k

localstorage： 使用方法进行键值对的方式存储（getItem(键，值)），永久存储，但是可以根据方法清除， 存储大小5m

方法	描述	实例
setItem()	将对应的名字和值传递进去存储	localStorage.setItem('users','我是user')
getItem()	名称作为参数，可以获取对应的值	localStorage.getItem('users')
removeItem()	名称作为参数，可以删除对应的数据	localStorage.removeItem('users')
clear()	可以删除所有存储的数据	localStorage.clear()

sessionstorage：跟 localstorage 方法一样，但是是单页面回话存储，跳转页面被清除，

vuex：相当于全局变量，刷新页面清除，想长久保持数据存在，只能使用Cookie和localstorage存储，然后再赋值回去
如：

 getters :{
       userName: (state,getters,rootState)=>{
          console.log(state.userId)
          let a =  (state.userId?state.userId:localStorage.getItem('users'))
          return a
       }
   },

2、vue 使用

state 唯一数据源

像我们vue的data

定义
const  state = {
    token: '我是token'
  }
const store = new Vuex.Store({
    state
})

直接使用
this.$store.state.token    ==   '我是token'

引入使用
import {mapState} from 'vuex'
computed: {
   ...mapState(['token'])//不取别名 this.token==  '我是token'
    ...mapState({
      userToken: 'token'//取别名，this.userToken ==  '我是token'
    })
  },

getter 计算属性

从 store 中的 state 中派生出一些状态

定义
const  state = {
    token: '我是token'
  }
const getter ={
 tokenName(state,getters)=>{
      return state.token + '的getter ' //在token后面加数据
 }
}
const store = new Vuex.Store({
    state，
    getter 
})

直接使用
this.$store.getter .tokenName    ==   '我是token的getter'

引入使用
import {mapGetters} from 'vuex'
computed: {
   ...mapGetters(['tokenName'])//不取别名 this.tokenName == '我是token的getter'
    ...mapGetters({
      userTokenName: 'tokenName'//取别名，this.userTokenName =='我是token的getter'
    })
  },

mutation 唯一store修改方法

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，mutation 必须同步执行

定义
const  state = {
    token: '我是token'
  }
const  mutation= {
    setToken(state,val){
       state.token = val
     }
  }
const store = new Vuex.Store({
    state,
    mutation
})

直接使用
this.$store.commit('setToken','白日梦')   // token ==  '白日梦'

引入使用
import {mapMutations} from 'vuex'
methods: {
   ...mapMutations(['setToken']) //不取别名 this.setToken('白日梦')  =>   token ==  '白日梦'
    ...mapMutations({
      setName: 'setToken'//取别名， this.setName('白日梦')  =>   token ==  '白日梦'
    })
  },

Action 提交的是 mutation

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

定义
const  state = {
    token: '我是token'
  }
const  mutation= {
    setToken(state,val){
       state.token = val
     }
  }
const  Action= {
    ActionToken({commit},val){
       commit（'setToken',val）
     }
  }
const store = new Vuex.Store({
    state,
    mutation,
    Action
})

直接使用
this.$store.dispatch('ActionToken','白日梦')   // token ==  '白日梦'

引入使用
import {mapActions} from 'vuex'
methods: {
   ...mapActions(['ActionToken']) //不取别名 this.setToken('白日梦')  =>   token ==  '白日梦'
    ...mapActions({
      setName: 'ActionToken'//取别名， this.setName('白日梦')  =>   token ==  '白日梦'
    })
  },

modules 模块化

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

当 namespaced: false 默认值为false ，除了state取值需要添加模块名称，别的不需要添加

const user = {
namespaced: false  ，
  state: () => ({ 
      name: '小青'
  }),
  getters: { 
    names(state){
      return  state.name + '青'
   }
 },
  mutations: { 
   setName(state，val){
      state.name = val
   }
},
  actions: { 
  setAcName({commit},val){
   commit（'setName',val）
 }
},

}
const store = new Vuex.Store({
  modules: {user}
})

使用
this.$store.state.user.name == '小青'
this.$store.getters.names  == '小青青'
this.$store.commit('setName','小周')   //    name == '小周'
this.$store.dispatch('setAcName','小周')   //    name == '小周'

当 namespaced: true ，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

const user = {
namespaced: true ，
  state: () => ({ 
      name: '小青'
  }),
  getters: { 
    names(state){
      return  state.name + '青'
   }
 },
  mutations: { 
   setName(state，val){
      state.name = val
   }
},
  actions: { 
  setAcName({commit},val){
   commit（'setName',val）
 }
},

}
const store = new Vuex.Store({
  modules: {user}
})

使用
this.$store.state.user.name == '小青'
this.$store.getters['user/names']  == '小青青'
this.$store.commit('user/setName','小周')   //    name == '小周'
this.$store.dispatch('user/setAcName','小周')   //    name == '小周'

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

• 应用层级的状态应该集中到单个 store 对象中。
• 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
• 异步逻辑都应该封装到 action 里面。
  只要你遵守以上规则，如何组织代码随你便