vuex的理解

一、什么是vuex

Vuex 是一个专为 Vue.js
应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

二、vuex的五大核心

state: 数据 actions:可以包含异步操作 mutations: 唯一可以修改state数据的场所 getters:
类似于vue组件中的计算属性，对state数据进行计算（会被缓存） modules:模块化管理store（仓库），每个模块拥有自己的
state、mutation、action、getter

三、vuex的执行流程

客户端操作事件，dispatch调用一个action 对应的action处理参数，比如接口/逻辑操作/传值/commit一个type类型
mutation接收一个type类型触发对应的函数，修改state的值 state更改后对应的view视图在render的作用下重新渲染

四、vuex的使用

4.1首先安装vue项目和vuex

4.2.新建store文件 创建一个Index.js 在index文件里面写下面代码：

在src路径下创建一个store文件，里面创建一个Index.js

import Vue from "vue"
import Vuex from "vuex"
//引入cart的vuex模块
import cart from "@/store/modules/cart.js"
Vue.use(Vuex)
export default new Vuex.Store({
	//当做data
	state:{
	},
	//相当于计算属性
	getters:{
	},
	//同步一些方法
	mutations:{
	},
	//存放异步的方法
	actions:{
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这里面的state就相当于data，getters相当于computed，mutations存放同步的方法，actions存放异步的方法。

4.3.在main.js中引入vuex

在main.js的入口文件引入并在new vue中初始化
注意引入的使用不加{}会报错，引入方式如下：
import { store } from “./store/index”

import Vue from 'vue'
import App from './App'
import store from './store'       //引入vuex
Vue.prototype.$store = store      //引入vuex
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	store, 						  //引入vuex
    ...App
})
app.$mount()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.4vuex

vuex中的数据源state，我们需要保存的数据就保存在这里。
将数据放在state中

4.5页面使用

在需要使用这些数据的文件中可以使用$store.state.xx调用数据

五、vuex持久化操作

问题：存储在vuex中的状态，刷新页面，会丢失。为了解决刷新页面数据丢失，才有了数据持久化。

最简单的做法就是利用插件 vuex-persistedState。

安装 cnpm install vuex-persistedState -S
-S 是–save的简写，意为：把插件安装到dependencies（生产环境依赖）中
-D是–save-dev的简写，意为：把插件安装到devDependencies（开发环境依赖）中

使用

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({
    storage: sessionStorage,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})
1
2
3
4
5
6
7
8
9
10
11
12

参数：

storage:存储方式。（sessionStorage,localStarage） key:定义本地存储中的key

5. 高级语法---- 模块化管理数据 （modules）

1. 什么时候需要用到模块管理vuex数据。

项目庞大，数据信息量特别大的时候，我们可以考虑分模块形式管理数据，比如user模块管理用户信息数据，cart模块管理购物车数据，shop模块管理商品信息数据。

import vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);

const state= ()=>{ token:''}
const actions = {
   set_token({commit},val){
     commit("to_token",val)
  }
}
const mutations = {
   to_token(state,val){
    state.token=val;
  }
}
const getters = {}


//user模块
let user = {
  namespaced: true, //一定要开始命名空间。
  state: { userid: 1234 },
  actions: {
  },
  mutations: {
    SET_USERID(state, val) {
      state.userid = val;
    }
  },
  getters: {

  }
}

//购物车数据的模块
let cart = {
  namespaced: true,
  state: { userid: 567 },
  actions: {

  },
  mutations: {
  },
  getters: {

  }
}


const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    user,
    cart
  },
  plugins: [createPersistedState({
    storage: sessionStorage,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

home.vue如何使用：

获取user模块的`userid`
this.$store.state.user.userid
this.$store.commit("user/SET_USERID",12345)// 前面是指定模块user 中的SET_USERID 方法，后面是传参 可以是对象、数组、字符串等
1
2
3

6. 高级用法----- 辅助函数（语法糖）

1. 有那几个辅助函数(4大金刚)

mapState,mapActions,mapMutations,mapGetters

2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的

3. 如何使用

home.vue

<template>
 <div id="">
   {{ token }}
   {{ token - x }}
 </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

import {createNamespacedHelpers} from 'vuex'

const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')

const {mapState:mapStateCart,mapActions:mapActionCart,mapMutations:mapMutaionCart} = createNamespacedHelpers('cart')



export default {
 name: '',
 data() {
   return {}
 },
 computed: {
   ...mapState({
     token: 'token'
   }),
   ...mapGetters(['token-x']),
   ...mapSateUser(['userid']),
   ...mapStateCart({cartid:'userid'})
 },
 //生命周期 - 创建完成（访问当前this实例）
 created() {
   this.setToken('123456')
 },
 //生命周期 - 挂载完成（访问DOM元素）
 mounted() {},
 methods: {
   ...mapActions({
     setToken: 'setToken'
   }),
   ...mapMutations(['SET_TOKEN']),
   ...mapMutaionUser({
   setId:"setToken"
  })
 }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48