1, 安装 vue add vuex
2, 安装完之后会自动生成store文件夹,并在main.js中自动引用
store/index.js
3,在store文件夹下的index.js中定义
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
username:'霍比特人'
},
getters:{
},
mutations: {
},
actions: {
},
modules: {
}
})
4,组件中获取state
console.log('store中的值 : '+this.$store.state.username);
<div>{{name}}</div>
注意要放在computed方法中,可以实时变化
computed: {
name(){
return this.$store.state.username
}
},
4.2,辅助函数mapState,能够帮助我们更便捷的获取state
computed: mapState(["username"]),
5, Getters 获取并操作属性
5.1 getters 在原有状态下派生新的状态
(1)/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
username:'哈哈',
count:0,
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters:{
/* 原有基础上派生新的状态 */
username: state => {
return state.username+'..new'
},
count: state=>{
return ++state.count
}
},
mutations: {
},
actions: {
},
modules: {
}
})
(2)*.vue
computed: {
username(){
return this.$store.getters.username
}
},
5.2 getters 在原有状态下过滤派生新的状态
(1)
state: {
username:'哈哈',
count:0,
todos: [
{ id: 1, text: '...', completed: true },
{ id: 2, text: '...', completed: false },
{ id: 3, text: '...', completed: true },
{ id: 4, text: '...', completed: false },
{ id: 5, text: '...', completed: true },
]
},
getters:{
/* 原有基础上派生新的状态 */
username: state => {
return state.username+'..new'
},
count: state=>{
return ++state.count
},
completedTodos: state => {
return state.todos.filter(t=>t.completed) //filter过滤,得到每一个todo,如果todo.completed为真得到,false则被过滤掉
//return state.todos.filter(t=>!t.completed) 过滤掉真的
}
},
(2)
completedTodos(){
return this.$store.getters.completedTodos
}
5.3 getters 返回某个新的状态的长度
getters:{
completedTodos: state => {
return state.todos.filter(t=>!t.completed)
},
/* 返回 completedTodos数据为假的个数*/
completedTodosCount:(state,getters)=>{
return getters.completedTodos.length
}
},
5.4 getters 通过id找到某个值
(1)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', completed: true },
{ id: 2, text: '...', completed: false },
{ id: 3, text: '...', completed: true },
{ id: 4, text: '...', completed: false },
{ id: 5, text: '...', completed: true },
]
},
getters:{
getTodosById: state => id =>{
return state.todos.find(t=>t.id===id)
}
},
mutations: {
},
actions: {
},
modules: {
}
})
(2)
{{getTodosById(1)}}
computed: {
getTodosById(){
return this.$store.getters.getTodosById
}
},
5.5 getters 简化
<div class="f1">{{getTodosById(1)}}</div>
import { mapState,mapGetters } from 'vuex'
computed: mapGetters(["getTodosById"]),
6,Mutations 修改状态 ( Mutation必须是同步,如果用到异步要使用action)
(1)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0,
},
getters:{
},
mutations: {
incrementCount(state){
return state.count++
},
decrementCount(state,n){
// n为传递过来的参数 ,
//在大多数情况下,载荷(n)应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读
return state.count-=n
}
},
actions: {
},
modules: {
}
})
(2)
<div class="f1">
<button @click="increment">+</button>
{{count}}
<button @click="decrement(2)">-</button>
</div>
methods: {
increment(){
/* 触发mutation中的方法 */
this.$store.commit("incrementCount")
},
decrement(n){
this.$store.commit("decrementCount",n)
}
},
7,Actions 用来操作mutation,异步修改状态 (Action中主要做数据的请求)
Action 类似于 mutation,不同在于:
· Action 提交的是 mutation,而不是直接变更状态。
· Action 可以包含任意异步操作。
(1)操作count
actions: {
incrementCountAsync(context){ //context相当于 this.$store
setTimeout(()=>{
context.commit("incrementCount") //提交到mutation
},2000)
},
decrementCountAsync({commit},payload){ // 结构出 commit ; payload接收参数
setTimeout(()=>{
commit("decrementCount",payload)
},1000)
}
},
————————————————————
<div class="f1">
<button @click="increment">+</button>
{{count}}
<button @click="decrement(2)">-</button>
</div>
methods: {
increment(){
this.$store.dispatch("incrementCountAsync")
},
decrement(n){
this.$store.dispatch("decrementCountAsync",n)
}
},
(2)获取和更新数据
import Vue from 'vue'
import Vuex from 'vuex'
import http from '../http'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', completed: true },
{ id: 2, text: '...', completed: false },
{ id: 3, text: '...', completed: true },
{ id: 4, text: '...', completed: false },
{ id: 5, text: '...', completed: true },
]
},
getters:{
},
mutations: {
setTodos:(state,n)=>(state.todos=n) //n为接收的参数 , todos为state中的todos
},
actions: {
async fetchTodos({commit}){
const res = await http.get('/')
console.log(res);
/* 更新数据 */
commit("setTodos",res.data)
}
},
modules: {
}
})
————————————————————————
<div>{{todos}}</div>
<script>
import { mapState,mapGetters } from 'vuex'
export default {
methods: {
fetchTodos(){
this.$store.dispatch("fetchTodos")
}
},
computed: mapState(["username","count","todos"]),
created() {
this.fetchTodos()
},
}
</script>
8,Module 模块化 (将state中对象抽离, 每一个state包含自己的getters,mutations和actionss,从而实现模块化)
(1)(修改index,js内容)store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import todos from './modules/todos'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
todos
}
})
(2)(在store目录下创建modules目录,并在modules目录下创建todo,js) store/modules/todos.js
import http from '../../http'
const state = {
todos: [
{ id: 1, text: '...', completed: true },
{ id: 2, text: '...', completed: false },
{ id: 3, text: '...', completed: true },
{ id: 4, text: '...', completed: false },
{ id: 5, text: '...', completed: true },
]
}
const getters = {
completedTodos: state => {
return state.todos.filter(t=>!t.completed) //filter过滤,得到每一个todo,如果todo.completed为真得到,false则被过滤
},
/* 返回 completedTodos数据为假的个数*/
completedTodosCount:(state,getters)=>{
return getters.completedTodos.length
}
}
const mutations = {
setTodos:(state,n)=>(state.todos=n) //n为接收的参数 , todos为state中的todos
}
const actions = {
async fetchTodos({commit}){
const res = await http.get('/')
console.log(res);
/* 更新数据 */
commit("setTodos",res.data)
}
}
export default {
state,
getters,
mutations,
actions
}