一、优点
Vuex状态管理跟使用传统全局变量的不同之处：
1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commit）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。否则就全局都会修改
二、安装VueX步骤
1.安装
cnpm install vuex-localstorage
2.引用VueX
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3.在引入Store
image.png
创建vuex的用法
import Vue from 'vue'
import Vuex from 'vuex'
import usersov from './user'
import createPersist from 'vuex-localstorage'
Vue.use(Vuex)
// 创建vuex 构造器
export default new Vuex.Store({
state:{
}
})
主要包括以下几个模块:
1.State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
2.Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
3.Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
4.Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
5.Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
1.State
//state存储应用层的状态
state:{ // 声明数据
// n:0,
// username:'',
shopCar:[ 1,2,3,4,5],
count:5
},
2.Getter
getters:{// 类似与 state 的计算属性 可以根据state中的数据的变化 计算出新的值
rgetShopCarLen(state){
var sum = 0
console.log(state.shopCar);
for(var i=0; i<state.shopCar.length; i++){
sum+=state.shopCar[i]
}
return sum
}
}
3.Mutation
我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方
mutations:{ // 修改数据的 方法
increment(state,val){ // 添加这个名字state就可以不用this
// 变更状态
state.count += val;
},
},
我们在提交commit时候，字符串参数increment,就是对应在 mutations中的increment。
一般通过方法或钩子触发，例如：
methods: {
getVal(item) {
//通过commit提交一个名为increment的mutation
this.$store.commit("increment", item);
}
}
4.Action
// 用来保存用户信息的 store
export default {
//存放数据
state:{
userInfo:{},
key:''
},
//通过commit mutations中的方法来处理
mutations:{
// 定义接收用户信息的方法
updateUserInfo(state,val){
state.userInfo=val
console.log(state.userInfo);
},
undateKey(state,val){
state.key=val
}
},
//接受dispatch传递过来的方法和参数
actions:{
undateKey(state,val){
//处理异步操作
setTimeout(() => {
//通过commit提交一个名为getParam的mutation
//action 函数接收一个 store 的实例对象，因此你可以调用 store.commit 提交一个 mutation
state.commit('undateKey',val)
}, 0);
}
}
}
然后我们就在组件里这么调用就可以了
methods: {
getVal() {
var name= 'xia';
var age= '26';
var sex= 'man';
//1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
this.$store.dispatch('undateKey',{name,age,sex})
}
}
5.Module
随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user' // 模块
import createPersist from 'vuex-localstorage'
Vue.use(Vuex)
// 创建vuex 构造器
export default new Vuex.Store({
actions,
getters,
state,
mutations,
// 模块或模组
modules:{
user // 引入的模块
},
})
user.js 文件
// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
state: {
text: 'moduleA'
},
getters: {},
mutations: {},
actions: {}
}
然后我们就在组件里这么调用就可以了
<template>
<div class="demo">
<h1>{{getText1}}</h1>
</div>
</template>
computed: {
getText1(){
return this.$store.state.user.text;
},
}
由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问
vuex最最简单的项目实例
1.存储数据( a.vue文件 )
import { mapMutations } from "vuex"; // 引入mapMutations
export default {
methods: {
...mapMutations({
// 将changeNews与mutations中的SET_NEWS关联
changeNews: "SET_NEWS"
}),
submit(){
// 提交一个名为changeNews的mutation，并传入参数val
let val = 'test news';
this.changeNews(val);// 相当于this.$store.commit("changeNews", val);
}
}
}
2.获取数据( b.vue文件 )
import { mapGetters } from "vuex"; // 引入mapGetters
export default {
computed: {
// 用vuex读取数据(读取的是getters.js中的数据)
// 相当于this.$store.getters.news(vuex语法糖)
...mapGetters(["news"])
},
created() {
// 获取getters中news数据
console.log(this.news);
}
}
.
3.store文件目录结构
index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'
//每次修改state都会在控制台打印log
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug, // 当debug=true时开启严格模式(性能有损耗)
plugins: debug ? [createLogger()] : []
})
state.js:
const state = {
news: {}
}
export default state
mutations.js:
const mutations = {
SET_NEWS(state, val) {
state.news= val
}
}
export default mutations
actions.js:
//异步处理
const actions = {
M_NEWS({ commit }, val) {
commit('SET_NEWS', val); // commit mutations修改
}
}
export default actions
4.使用store
在main.js中引用
import Vue from 'vue'
import App from './App'
import router from './router/index'
Vue.config.productionTip = false
import axios from 'axios'
Vue.prototype.axios=axios;
import store from './store/index'
new Vue({
el: '#app',
router:router,
store:store,
components: { App},
template: '<App/>'
})
