一、 安装
npm install vuex --save
或者
yarn add vuex
二、创建Vuex和注入到Vue实例对象
Vuex 使用单一状态树
(用一个对象就包含了全部的应用层级状态)。每个应用将仅仅包含一个 store 实例。
import Vue from 'vue'
import Vuex from 'vuex'
// 1.注册插件到Vue
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
state: { //状态
//在这里创建共享数据 对象必须是纯粹的对象 (含有零个或多个的 key/value 对):
},
mutations: {//操作方法 同步操作
},
actions: {//操作方法 异步操作 可以存放网络请求
},
getters: { //计算属性,可以对state里面的数据进行一些操作 不可以接收外面的参数
},
modules: { //模块 对于多种状态的的模块导入
//由于每个应用将仅仅包含一个 store 实例,所以在这里就可以进行导入不同状态模块导入
}
})
// 3.导出对象
export default store;
在main.js的vue实例对象中注入store,这种方式允许你在组件中以this.$store
的方式访问Property
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
三、使用
1、State的使用
State中定义一个name
属性用于全局共享
const store = new Vuex.Store({
state: { //状态
name: 'Passer'
}
})
在组件里使用
姓名: {{$store.state.name}}
或者按照官方推荐的方式在组件的计算属性当中获取
姓名: {{storeName}}
2. Getters的使用
- Getter 接受 state 作为其第一个参数;
- Getter 也可以接受其他 getter 作为第二个参数;
- Getter不没有办法直接传值,如果需要传值就需要方法方式访问;
注意
: getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的; 通过方法方式访问每次都会去进行调用,而不会缓存结果。
假如现在需要在 视图展示name的时候前面加上:Hello,
而且多处使用了这中格式
方式一:通过获取this.$store.state.name,自己拼接上“ Hello,”,在每个使用到的地方都这样操作
方式二: 通过Getters 定义一个计算属性showName ,通过属性的方式访问。
getters: { //计算属性,可以对state里面的数据进行一些操作 不可以接收外面的参数
showName(state) {
return 'Hello,' + state.name
},
},
现在使用的时候就从getters里面获取showName属性,$store.getters. showName
姓名: {{$store.getters. showName}}
方法方式访问Getters并传参
getters: { //计算属性,方式访问Getters并传参,结果不会被缓存
showName(state) =>(preStr) => {
return preStr + state.name
},
}
使用
姓名: {{$store.getters. showName('Hello,')}}
3. Mutations的使用
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
mutation 非常类似于事件:每个 mutation 都有一个
字符串的 事件类型 (type) 和 一个 回调函数 (handler)
。接收 state 作为第一个参数
Payload(载荷)作为它的第二个参数,Payload应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读,也可以是单个值。
字符串的 事件类型 (type) ,官方建议定义成字符串常量,在使用到的地方统一使用CHANGE_NAME来替换 changeName
export const CHANGE_NAME = 'changeName'
假如现在需要修改name的值,那我们可以这样做
mutations: {//操作方法 同步操作
//[CHANGE_NAME](state, payload) {} 统一定义了以后就可以使用 CHANGE_NAME
changeName(state, payload) {
// 单值方式传参来提交修改
state.name = payload
//对象的方式来提交修改
state.name = payload.name
}
}
我们在mutations里注册的是changeName
事件类型 (type) ,所以使用如下
姓名:{{$store.getters. showName('Hello,')}}
4. Actions的使用
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
- Action接受一个与 store 实例具有相同方法和属性的 context 对象
我们这里还是现实修改名字的功能,通过actions来实现
actions: {//操作方法 同步操作
//context 与 store 实例具有相同方法和属性的
achangeName(context, payload) {
context.commit('changeName', payload)
}
}
使用的地方就不是直接this.$store.commit,而是通过 this.$store.dispatch 方法触发
姓名:{{$store.getters. showName('Hello,')}}
当然因为上面的修改方式为同步修改,所以看起来还不如使用mutations来实现就好,但是假如我们的姓名是从服务器分发下来的,我们需要在触发action的时候异步获取姓名来修改,那么这个时候action就开始发挥作用力,它也是就是为这个而生的。
异步操作时为了可以通知调用的地方状态,一般会与Promise
结合使用!
actions: {//操作方法
//context 与 store 实例具有相同方法 和属性的
achangeName(context, payload) {
return new Promise((resolve) => {
//setTimeout来模拟异步操作
setTimeout(() => {
context.commit('changeName', payload)
resolve('3333')
}, 2000)
})
}
}
5. Modules的使用
由于使用单一状态树,应用的所有状态会集中到一个对象。store 对象就有可能变得相当臃肿,而
Vuex 允许我们将 store 分割成模块(module)
。
每个模块拥有自己的 state
、mutation
、action
、getter
、甚至是嵌套子模块——从上至下进行同样方式的分割:
如下就是分离的模块moduleA:
const moduleA = {
state: {...},
mutations: {//操作方法 同步操作 ... },
actions: {//操作方法 异步操作 可以存放网络请求 ... },
getters: { //计算属性,可以对state里面的数据进行一些操作 不可以接收外面的参数 ...}
}
export default moduleA;
引用到Store
import moduleA from './moduleA'
// 1.注册插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
modules: { //模块 对于多种状态的的模块导入
moduleA
}
})
// 3.导出对象
export default store;
moduleA模块:
- 内部的
mutation
和getter
接收的第一个参数是模块的局部状态对象state
- 内部的
action
局部状态就通过context.state
来获取,根节点的状态则为context.rootState
const moduleA = {
state: {...},
actions: {//操作方法 异步操作 可以存放网络请求 ...
moduleAdd(context, count) {
context.state -> 局部state,也就是moduleA定义的state
context.rootState -> 根节点的state
count -> 接收的参数
}
}
}
未完,待续...