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 里面。
只要你遵守以上规则，如何组织代码随你便