1. Vuex有哪些属性
state ==> 全局共享属性
getters ==> 针对于state数据进行二次计算
mutations ==> 存放同步方法的
actions ==> 存放异步方法的，并且是用来提交mutations的
modules ==> 把vuex再次进行模块的划分（进行细分，便于项目的维护）
import vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)
export default new Vuex.Store({state:{/*放置全局共享属性*/},getters: {/*类似于计算属性*/},mutations: {/*用于存放同步方法的*/},actions: {},modules: {}
})2. Vuex使用state值
this.$store.state.xxx
辅助函数：mapState
以上两种方式都可以拿到state，区别是什么
1. 使用this.$store.state.xxx是可以直接修改vuex的state数据的
2. 使用辅助函数的形式，是不可以修改的
/*这是store文件夹下面的index.js文件*/
import vue from 'vue'
import Vuex from 'vuex';Vue.use(Vuex)export default new Vuex.Store({state:{str: '123'},getters: {/*类似于计算属性*/},mutations: {},actions: {},modules: {}
})/*在任意一个文件内我们都可以使用它*/
1. 直接使用
<h1>{{ this.$store.state.str }}</h1>
<button @click='btn'>修改str的值</button>
methods:{btn(){/*这种方式可以直接修改state里面数据的值*/this.$store.state.str = 'xxxxxx'}
}
2. 利用辅助函数使用
<template><div>{{ str }}</div><button @click='btn'>修改str的值</button>
</template>
import { mapState } from 'vuex'
export default {computed: {...mapState(str)}methods:{btn(){/*这种写法是错误的，不可以直接修改state里面数据的值，因为mapState其实就相当于从store的index里面复制了一份str给当前组件，用this.str='xxx'去修改并没有实际修改到store文件夹里面的内容*/// this.str = 'xxxxxx'}}
}3. Vuex的getters值修改
getters是不可以修改的
/*这是store文件夹下面的index.js文件*/
import vue from 'vue'
import Vuex from 'vuex';Vue.use(Vuex)export default new Vuex.Store({state:{str: '123'},getters: {changeStr(str){return state.str + 'x';}},mutations: {},actions: {},modules: {}
})/*在任意一个文件内我们都可以使用它*/
1. 直接使用
<h1>{{ this.$store.getters.changeStr }}</h1>
2. 利用辅助函数使用
<template><div>{{ changeStr }}</div>// <input type="" name="" v-model='changeStr'> /*这样写是有问题的，因为v-model是mvvm，其中mv，也就是数据到视图，而changeStr是不支持修改的，所以这样写一旦输入框内容发生变化就会报错*/
</template>
import { mapGetters } from 'vuex'
export default {computed: {...mapGetters(['changeStr'])}
}4. Vuex的matations和actions区别
相同点：mutations和actions都是用来存放全局方法的，它们都拿不到return值
区别：mutations ==》 同步
actions ==> 异步的，返回的是一个Promise对象，它可以执行相关异步操作
/*index.js文件*/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({state: {number: 1,},getters: {},mutations: {add(number){state.number += 2;}},actions: {addNumber({commit, state}){state.number += 4;}},modules: {}
})
/*在任意一个文件内我们都可以使用它*/
<template><div>{{ this.$store.state.number }}</div><button @click='add'>点击增加+2</button><button @click='addNumber'>点击增加+4</button></template>
import { mapMutations, mapActions } from 'vuex'
export default {methods: {...mapMutations(['add']),...mapActions(['addNumber'])}
}5. Vuex的modules
store文件夹下——>新建modules文件夹，与index.js平级——>新建user.js文件
/*user.js文件*/
export default {state: {token: 'kjhgfeuiohg',}
}/*index.js文件*/
import vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)
import user from './modules/user'
export default new Vuex.Store({state:{},getters: {},mutations: {},actions: {},modules: {user}
})
/*在任意一个文件内我们都可以使用它*/
1. 直接使用
<h1>{{ this.$store.state.user.token }}</h1>
2. 利用辅助函数使用
<template><div>{{ token }}</div>
</template>
import { mapState } from 'vuex'
export default {computed: {...mapState({token: state=>state.user.token})}
}
6. Vuex持久化存储
Vuex本身不是持久化存储数据的，它本身是一个状态管理仓库，state是一个全局属性，Vuex就是一个存放全局属性的一个地方而已。
如果想实现持久化存储的话，有两种方式：
1. 自己写本地存储
2. 使用插件
/*使用插件*/
1. 下载安装插件
yarn add vuex-persistedstate 或 npm install --save vuex-persistedstate
2. 配置使用插件
/*index.js文件*/
import vue from 'vue'
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
import user from './modules/user'
export default new Vuex.Store({state:{},getters: {},mutations: {},actions: {},modules: {user},/*vuex持久化存储的配置*/plugins:[createPersistedState({storage: window.sessionStorage, // 存储方式：localStorage,sessionStorage,cookieskey: "store", // 存储key的key值render(state){return {...state} // 要存储的数据}})]
})
