对vuex的一些简单理解

vuex

1.首先什么是vuex呢？

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ Vuex是我们vue项目开发的时候使用的状态管理工具。并且它采用了集中式储存来管理我们应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2.1 安装

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ vuex是我们学习完

vue-cli

vue2.0

npm install vuex --save

Yarn：

yarn add vuex

2.2 引入

////在store目录下的index.js文件里引入：
import Vue from 'vue'
import Vuex from 'vuex'

////使用
Vue.use(Vuex)

////创建一个vuex实例
let store = new Vuex.Store({
state:{

},
mutations:{

},
getters:{

},
actions:{

},
plugins: [createPersistedState()]
})

////导出你的store
export default store

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ 相信刚接触的童鞋们看到Vuex实例中的

state

getters

mutations

actions

modules

state:

​ 例子：state：{

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ phone：‘17547584106’，
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ count:100,
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ Loading:true,

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ }

​ ​ ​ ​ ​ ​ mapState辅助函数：当一个组件需要获取多个状态时候，将这些状态都声明为计 算属性会有些重复和多余的问题。为了解决这个问题，我们可以使用 mapState 辅助函数 帮助我们生成计算属性。

getters

getters:{
sum(state){
let sum = 0
state.shopArr.forEach((item)=>{
if(item.checked){
sum += item.number*item.price
}
})
return sum
}
}

mutations

const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
////无提交荷载
increment(state) {
state.count++
}
////提交荷载
incrementN(state, obj) {
state.count += obj.n
}
}
})

你不能直接调用一个 mutation handler。

////无提交荷载
store.commit('increment')
////提交荷载
store.commit('incrementN', {
n: 100
})

对象风格的提交方式:

store.commit({
type: 'incrementN',
n: 10
})

actions

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
setInterval(function(){
context.commit('increment')
}, 1000)
}
}
})

注意：Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
分发actions：
Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

与mutations类似的地方：Actions 支持同样的载荷方式和对象方式进行分发

//// 以载荷形式分发
store.dispatch('incrementN', {
n: 10
})

//// 以对象形式分发
store.dispatch({
type: 'incrementN',
n: 10
})

modules

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})

模块的局部状态
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态

const moduleA = {
state: { count: 0 },
mutations: {
increment: (state) {
// state 模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}

命名空间
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ 如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
例子：

const store = new Vuex.Store({
modules: {
account: {
namespaced: true,

// 模块内容（module assets）
state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
actions: {
login () { ... } // -> dispatch('account/login')
},
mutations: {
login () { ... } // -> commit('account/login')
},

// 嵌套模块
modules: {
// 继承父模块的命名空间
myPage: {
state: () => ({ ... }),
getters: {
profile () { ... } // -> getters['account/profile']
}
},

// 进一步嵌套命名空间
posts: {
namespaced: true,

state: () => ({ ... }),
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
}
}
}
}
})

启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。 换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不需要修改模块内的代码

4.Vuex的工作流程：
">
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ 首先，

Vue

VueX

如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。

注意,不建议在组件中直接对state中的成员进行操作，这是因为直接修改(例如：this.$store.state.name = 'hello')的话不能被VueDevtools所监控到

最后被修改后的state成员会被渲染到组件的原位置当中去。