vuex的使用
vuex的作用
vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，解决vue中各个组件之间传值和通信的问题
vuex的使用
-
安装vuex：
npm install vuex --save -
我们在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中再导出
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 1
}
})
export default store
注意引入的vue和vuex字母的大小写，v都是小写，如果写成大写就无法引入
- 我们在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
store跟router类似，如果import进来的模块名不叫store，应该这样写：
import Vue from 'vue'
import App from './App'
import router from './router'
import MyStore from './store'
Vue.config.productionTip = false
Vue.prototype.$appName = { name: 'main' }
/* eslint-disable no-new */
new Vue({
el: '#app',
store: MyStore,
router,
components: { App },
template: '<App/>',
})
在任意模板中就可以使用store里面的变量了：
<h1>{{ this.$store.state.count }}</h1>
- Getters:
Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果
它的作用主要是用来派生出一些新的状态。比如我们要把state状态的数据进行一次映射或者筛选，再把这个结果重新计算并提供给组件使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 1
},
getters: {
getCount: function(state) {
return state.count + 1;
}
}
})
export default store
<div>{{this.$store.getters.getCount}}</div>
注意getCount不要加括号
- Mutations：
如果需要修改store中的值唯一的方法就是提交mutation来修改
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 1
},
getters: {
getCount: function(state) {
return state.count + 1;
}
},
mutations: {
add(state) {
state.count = state.count + 1;
},
reduce(state) {
state.count = state.count - 1;
}
}
})
export default store
<template>
<div>
<div>{{this.$store.state.count}}</div>
<div>{{this.$store.getters.getCount}}</div>
<button @click="add">加</button>
<button @click="reduce">减</button>
<div @click="gotoTest2">goto test2</div>
</div>
</template>
<script>
export default {
methods:{
changeName(){
this.$appName.name = "test1"
},
gotoTest2(){
this.$router.push({name:"Test2"})
},
add(){
this.$store.commit("add")
},
reduce(){
this.$store.commit("reduce")
}
},
}
</script>
- 也可以使用actions来修改值
import Vue from 'vue'
import Vuex from 'vuex'
import { isContext } from 'vm';
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 1
},
getters: {
getCount: function(state) {
return state.count + 1;
}
},
mutations: {
add(state) {
state.count = state.count + 1;
},
reduce(state) {
state.count = state.count - 1;
}
},
actions: {
addFun(context) {
context.commit("add")
},
reduceFun(context) {
context.commit("reduce")
}
}
})
export default store
这里的context相当于上面的this.$store
<template>
<div>
<div>{{this.$store.state.count}}</div>
<div>{{this.$store.getters.getCount}}</div>
<button @click="add">加</button>
<button @click="reduce">减</button>
<div @click="gotoTest2">goto test2</div>
</div>
</template>
<script>
export default {
methods:{
changeName(){
this.$appName.name = "test1"
},
gotoTest2(){
this.$router.push({name:"Test2"})
},
add(){
this.$store.dispatch("addFun")
},
reduce(){
this.$store.dispatch("reduceFun")
}
},
}
</script>
组件中使用dispatch替代commit
- 使用参数：
<template>
<div>
<div>{{this.$store.state.count}}</div>
<div>{{this.$store.getters.getCount}}</div>
<button @click="add">加</button>
<button @click="reduce">减</button>
<div @click="gotoTest2">goto test2</div>
</div>
</template>
<script>
export default {
methods:{
changeName(){
this.$appName.name = "test1"
},
gotoTest2(){
this.$router.push({name:"Test2"})
},
add(){
this.$store.dispatch("addFun",2)
},
reduce(){
this.$store.dispatch("reduceFun",2)
}
},
}
</script>
import Vue from 'vue'
import Vuex from 'vuex'
import { isContext } from 'vm';
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 1
},
getters: {
getCount: function(state) {
return state.count + 1;
}
},
mutations: {
add(state, n) {
state.count = state.count + n;
},
reduce(state, n) {
state.count = state.count - n;
}
},
actions: {
addFun(context, n) {
context.commit("add", n)
},
reduceFun(context, n) {
context.commit("reduce", n)
}
}
})
export default store
-
在组件1里改变的值，通过路由跳转到组件2时，会同步更新，取改变后的值
-
store的在vue中的初始化过程
Vue.use(Vuex)时，跟所有插件一样，会调用Vuex的的install方法，注册一个$store属性
Vue.prototype.$store
在main.js里面，我们在根组件里传入了一个store对象，Vue会通过调用Vuex以下方法把这个对象赋值给$store：
function vuexInit () {
const options = this.$options
// store injection
if (options.store) {
this.$store = options.store
} else if (options.parent && options.parent.$store) {
this.$store = options.parent.$store
}
}
这样，我们后面使用this.$store实际操作的是store对象，因为Vue回调Vuex的vuexInit时，store这个变量名是写死的，所以根组件中传入的变量名必须是store，当然也可以用它指向其他变量，比如：
store: MyStore
router也是类似的道理
- vuex用于同一个页面各个组件之间传递数据，它使用内存保存变量，浏览器刷新后，保存的数据也将失效，本身并不适合做全局数据保存，所以如果需要刷新时还能使用保存的数据，需要结合sessionstorage或localstorage
getters:{
userInfo(state){
if(!state.userInfo){
state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
}
return state.userInfo
}
},
mutations:{
LOGIN:(state,data) => {
state.userInfo = data;
sessionStorage.setItem('userInfo',JSON.stringify(data));
},
LOGOUT:(state) => {
state.userInfo = null;
sessionStorage.removeItem('userInfo');
}
},
